分页组件几乎是一般网站都会涉及到的组件，网上有很多这样的插件，自己挑来跳去选择了这一款。
官方Demo网址：
功能强大，可扩展性比较强，而且幕后的工程师一直在完善这个插件，不废话了，上干货。
（模拟场景:商店网站，根据用户选择的查询条件，来查询数据库，并展示到前台）
1.JSP页面
如果你的web项目前台是基于bootstrap,js只需要引入2个js：
引入一个css:
页面元素：
2.JS 控制
a.组织要查询的商品的特征和限制条件，条件来自于页面用户输入或者是下拉框选择，组织为一个Object,类似与java 中的map;
var cxtj = { lx : $("#splx").val(), 商品类型 scrq : $("#spscrq").val(), 商品生产日期 ys : $("#spys").val(), 商品颜色 cc : $("#spcc").val(), 商品尺寸 sccj : $("#sccj").val() 生产厂家 }; b.定义一个全局的变量count，因为我使用的时候，出现了个问题，当变更查询条件后，分页组件需要重新生成；
var count = 1;count++; count > 2 ? $("#myPage").page('destroy') : ' c.前端总体代码如下：
具体的方法参数这里就不多言了，官方Demo 中写的比较详细
var count = 1;function query() { var cxtjobj = { lx : $("#splx").val(), 商品类型 scrq : $("#spscrq").val(), 商品生产日期 ys : $("#spys").val(), 商品颜色 cc : $("#spcc").val(), 商品尺寸 sccj : $("#sccj").val() 生产厂家 }; count++; //count 计数的作用，为当第二次以后点击请求时，先销毁分页组件 count > 2 ? $("#sppage").page('destroy') : ''; $("#sppage").page({ remote : { url : '请求地址@RequestMapping', pageIndexName : 'pageIndex', //请求参数，当前页数 pageSizeName : 'pageSize', //请求参数，每页数量 totalName : 'total', //指定返回数据的总数据量的字段名 params : { cxtj : JSON2.stringify(cxtjobj), }, callback : function(data, pageIndex) { if (data.success) { //-----在这里，你可以遍历你返回回来的值，遍历数据的方法，取决与你后台组织好，传递过来的数据结构-----
//1.返回Map 【data.key 就可以取到 value】如下： fhxxlist = data.fhxxlist; //2.返回 List
}).on("pageClicked", function (event, pageIndex) { $("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + ''); }).on('jumpClicked', function (event, pageIndex) { $("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + ''); }).on('pageSizeChanged', function (event, pageSize) { $("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + ''); }); }
3.后台java类进行处理的两个公共方法
a.分页组件传递一个 pagesize 和 pageindex ，需要返回datas 和 total;
b. 1)方法根据 countsql 查询出来的总条数, pageindex 来计算出总共需要多少页，并返回一个二维数组，没有用List是因为我觉得，二维数据已经够用；
2)方法将计算出来的二维数组，根据请求的 pageindex ,取出一个开始到结束的区间，并且在这个区间里面查询需要展示到前台的数据集合，返回给前台；
c.前台页面，每触发一次事件（pageClick,jumpClick,pageSizeChange）或者变更查询条件，都会请求一次后台，返回特定的数据集合；
d.不同的地方是（pageClick,jumpClick,pageSizeChange）事件，始终是一个分页组件，而变更查询条件会销毁原来的组件，重新初始化；
/** * 描述：根据 countsql 查询出来的总条数, pageindex 计算出总共需要多少页 */ public int[][] getPagearray(int total,int pagesize){ int page = (total%pagesize == 0 ? total/pagesize:total/pagesize + 1);int[][] pagearray = new int[page][pagesize]; int j = 1; for(int i = 0;i createPagination(String countsql,String cxxxsql,String retname,int pageSize,int pageIndex){ Map result = new HashMap (); List