最近安排一个小项目用到了BootStrap来做界面，分页也是必备的，但是找了一些BootStrap的分页插件感觉都不是太好用，很有可能是自己学的不太好，很长时间不太做前端界面了，也很生疏，接下来说下做的大体流程。
最终找到一个jQuery的分页插件：jQuery Pagination plugin
官网地址：

• jQuery Pagination plugin官网
• GitHub地址

page-demo1.jpg

代码：

$('#pagination-demo').twbsPagination({
 totalPages: 35,
 visiblePages: 7,
 onPageClick: function (event, page) {
 $('#page-content').text('Page ' + page);
 }
 });

<ul id="pagination-demo" class="pagination-sm"></ul>

具体的流程不太了解，但是总体上是这样的，你不用管很多参数，只需要给后台传递page，也就是当前页就好，这个值在onPageClick事件中触发。
具体说下我是如何实现的：

• 设置totalPages
• 将totalPages赋值到插件的参数中
• 通过url参数请求后台
• 处理后台返回数据

插件的JS代码

$('#pagination-demo').twbsPagination({    totalPages: totalCount,    visiblePages: 5,    href : '${cxf}/wiki/list/{{number}}',    onPageClick: function (event, page) {        $('#page-content').text('Page ' + page);    }});

这里需要几个参数：

• totalPages
• url

对于totalPages我是这样处理的：

var totalCount = 20;//      $.ajax({        async:false,        type:"get",        dataType : "json",        url: "${cxf}/wiki/queryAll",        success : function(data){            if(data.status ==200){                totalCount = data.data;                totalCount = (totalCount % 10 == 0) ? totalCount / 10 : totalCount / 10 + 1;            }        }    });

这里的逻辑是这样的：

• ajax请求后台controller
• 返回后台数据的个数
• 前台获取到后进行分页，每页显示10条数据，将页数赋值给totalCount
• 将totalCount赋值给totalPages

Java后台的代码

@RequestMapping(value = "list/{page}")
    public String listByPage(@PathVariable(value = "page") Integer start, Model model) {
        Integer limit = pageSize;
        if(start == null){
            start = 1;
        }
        List list = wikiContentService.listByPages(Integer.valueOf(start), limit);
        model.addAttribute("contents", list);
        return "list";
    }


    @RequestMapping(value = "queryAll")
    @ResponseBody
    public WikiResult queryAll(){
        List<WikiContent> list = wikiContentService.queryAll();
        WikiResult result = new WikiResult();
        result.setStatus(200);
        result.setData(list.size());
        return result;
    }

最后的效果：

page-demo2.jpg

页面做的比较丑，不要见怪哟，自己对这块也不是很熟悉，在找资料的时候很多细节想不通，网上完整的代码也比较少，深刻的了解这里面的痛苦，自己虽然做出来了，但是效果还是不太好，肯定有更好的方法去实现，也请指教。

2、Java分页

分页其实可以由前台和后台共同完成。
后台分页的逻辑就是：
必须要有3个参数：

• 总的数据数 total
• 每页显示的数据 pageSize
• 当前页 currentPage

我会这么处理这些数据：

• 拿到总的数据
• 计算出有多少页
  total%pageSize == 0 ? total/pageSize : total%pageSize+1;
• 然后根据当前页和每页显示的数量去数据库查询
• 一般数据库都会有分页的这种查询，MySql提供了limit关键字

大概也就这么些东西吧，不太详细，先分享了。