学习实践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日-凌晨
湖北-武汉-循礼门