首页 > 代码库 > 电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java
电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java
一、概述
学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件。
包括:
a.前端JS异步加载并渲染;
b.前端JSP、Freemarker、Struts标签渲染;
c.后端分页
自己写具体的分页算法和逻辑。
使用Mybatis分页插件。
今天,重点介绍下前端JS异步分页,简短介绍下后端Java提供数据。
二、 关键数据结构
三、后端Java提供分页数据源的思路:
控制层
服务层,就是获得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内容部分
这部分,解决2个问题,1是表头部分确定了2是留出了2个div,“bodyHolder”和"pageHolder"。
bodyHolder最终放动态生成的表主体的html内容,pageHolder主要放动态生成的分页栏。
调用JS组件部分
url:提供数据源的url
params:分页参数,查询参数等参数部分
bodyHolder和pageHolder请参考上面的介绍
tableTemplate:表主体的一行row的模版。
JS组件的结构
以上是主要的思路,前端异步,后端提供数据的一种解决方案。 待完善。
学习实践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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。