文档章节

电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java

FansUnion
 FansUnion
发布于 2015/10/22 10:29
字数 706
阅读 44
收藏 3
点赞 0
评论 0
一、概述
   学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件。

   包括:
    a.前端JS异步加载并渲染;
    b.前端JSP、Freemarker、Struts标签渲染;
    c.后端分页
       自己写具体的分页算法和逻辑。
       使用Mybatis分页插件。

  今天,重点介绍下前端JS异步分页,简短介绍下后端Java提供数据。
  
二、 关键数据结构
 
public class PageVo {
     /** 总记录数 */
	protected Integer totalCount = 0;
	/** 总共有多少页 */
	protected Integer totalPage = 0;
	/** 第几页 */
	protected Integer pageNo = 1;
	/** 每页显示条数 */
	protected Integer pageSize = 10;
        /** 表格中的数据 */
	protected List<?> rows;
}


三、后端Java提供分页数据源的思路
 控制层
 
@RequestMapping("list")
	public void list(PageVo pageVo, HttpServletResponse response) {
		PageVo page = adminGoodsService.page(pageVo);
		super.jsonPage(page, response);
	}



服务层,就是获得PageVo对象,包含了分页和list集合的数据。
持久层,获得list和totalCount、totalPage等count数目, 具体思路就是用Mybatis拦截器,拦截list查询,截取list的sql,拼接成count。
关键规律:list的sql和count的sql,后半部分是完全一样的,比如
listSql ="select * from goods"; 
countSql =" select count(*) from goods": 

四、 前端分页组件

Html内容部分
<table >
		<thead>
			<tr>
				<th>流水号</th>
				<th>ID</th>
				<th>分类</th>
				<th>名称</th>
				<th>标题</th>
				<th>现价</th>
				<th>原价</th>
				<th>浏览量</th>
				<th>创建时间</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="bodyHolder"></tbody>
	</table>
	<div id="pageHolder"></div>


这部分,解决2个问题,1是表头部分确定了2是留出了2个div,“bodyHolder”和"pageHolder"。
bodyHolder最终放动态生成的表主体的html内容,pageHolder主要放动态生成的分页栏。

调用JS组件部分
<script>
	(function() {
		var fuPage = new FuPage(
				{
					"url" : "/goods/list.html",
					"params" : {
						"pageNo" : 1,
						"pageSize" : 1
					},
					"bodyHolder" : "bodyHolder",
					"pageHolder" : "pageHolder",
					"tableTemplate" : "<tr><td>{id}</td><td>{goodsId}</td></tr>"
				});
		fuPage.send();
	})();
</script>

 url:提供数据源的url
 params:分页参数,查询参数等参数部分
 bodyHolder和pageHolder请参考上面的介绍
 tableTemplate:表主体的一行row的模版。

JS组件的结构
function FuPage(options) {
	this.url = options.url;
	this.params = options.params;

	this.startNo = 1;
	this.endNo = 1;

	this.tableTemplate = options.tableTemplate;
	
	this.bodyHolder=options.bodyHolder;
	this.pageHolder=options.pageHolder;
}
//发送请求并渲染table
 FuPage.prototype.send = function() {
	var that = this;

	$.post(this.url, this.params, function(data) {
		var page = data.page;
		if (that.isTable) {
			that.renderTable(page);
		} else {
			that.renderList(that, page);
		}
		renderPage(that, page);
		addPageEvent(that, page);
	});
}

FuPage.prototype.renderTable = function(page) {}
// 渲染分页栏
function renderPage(fuPage, page) {}
// 为分页超链接绑定click事件
function addPageEvent(fuPage, page) {}

 
以上是主要的思路,前端异步,后端提供数据的一种解决方案。 待完善。

时候不早了,抽空续写,感谢大家“收看” ~


小雷FansUnion-博学的互联网技术工作者

2015年1月7日-凌晨

湖北-武汉-循礼门


 

版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

共有 人打赏支持
FansUnion
粉丝 56
博文 857
码字总数 825464
作品 0
丰台
高级程序员

暂无相关文章

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 46分钟前 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部