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

一、概述
学习实践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日-凌晨

湖北-武汉-循礼门

巴特西

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

最新文章

热门文章