之前做分页想过做淘宝的那个，但是因为是后台要求不高，就Bootstrap Paginator插件感觉还蛮容易上手，所以就选了它。
Bootstrap Paginator分页插件下载地址：
DownloadVisit
Project in GitHub
1.这是需要分页的页面放的 js函数：
- <span style="font-size:14px;">function paging(page){
- $.ajax({
- type: "GET",
- url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
- dataType:"json",
- success: function(msg){
- ....//省略（查询出来数据）
- }
- });
- $.ajax({
- type: "GET",
- url:"${ctx}/api/v1/user/count/1",
- dataType:"json",
- success:function(msg){
- var pages = Math.ceil(msg.data/5);//这里data里面有数据总量
- var element = $('#pageUl');//对应下面ul的ID
- var options = {
- bootstrapMajorVersion:3,
- currentPage: page,//当前页面
- numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
- totalPages:pages //总页数
- }
- element.bootstrapPaginator(options);
- }
- });
- }</span>
页面：
- <span style="font-size:14px;"><ul class="pagination" id="pageUl">
- </ul></span>
*li里面自动生成的
2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：
- <span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {
- //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
- var currentTarget = $(event.currentTarget);
- switch (type) {
- case "first":
- currentTarget.bootstrapPaginator("showFirst");
- paging(page);
- break;
- //上一页
- case "prev":
- currentTarget.bootstrapPaginator("showPrevious");
- paging(page);
- break;
- case "next":
- currentTarget.bootstrapPaginator("showNext");
- paging(page);
- break;
- case "last":
- currentTarget.bootstrapPaginator("showLast");
- paging(page);
- break;
- case "page":
- currentTarget.bootstrapPaginator("show", page);
- paging(page);
- break;
- }
- },</span>
*在你点击的页面样式出来后调用paging（page）方法，这里的page源文件里的参数已经有了，直接传！
效果：当样式改变后，直接拿控件的page值进行ajax请求的发送！最后实现无刷新分页。