JQuery 常用积累（二）Pagination 分页组件

http://www.cnblogs.com/java-class/p/4542154.html

JQuery 常用积累（二）Pagination 分页组件

阅读目录
1.JSP页面
2.JS 控制
3.后台java类进行处理的两个公共方法

官方Demo网址：http://mricle.com/JqueryPagination

     分页组件几乎是一般网站都会涉及到的组件，网上有很多这样的插件，自己挑来跳去选择了这一款，功能强大，可扩展性比较强，而且幕后的工程师一直在完善这个插件，不废话了，上干货.

（模拟场景:商店网站，俺要根据用户选择的查询条件，来查询数据库，并展示到前台）

回到顶部

1.JSP页面

如果你的web项目前台是基于bootstrap,js只需要引入2个js：

<r:script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.js" />

<r:script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.min.js" />

引入一个css:

<r:style path="/style/css/jquery.pagination.css" />

页面元素：

<div id="spbpage" class="m-pagination"></div>

回到顶部

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 ? $("#sppage").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 : 'xxxxxx后台ajax 请求类地址@RequestMapping',
pageIndexName : 'pageIndex', //请求参数，当前页数
pageSizeName : 'pageSize', //请求参数，每页数量
totalName : 'total', //指定返回数据的总数据量的字段名
params : {
cxtj : JSON2.stringify(cxtjobj),
},
callback : function(data, pageIndex) {
if (data.success) {

//在这里，你可以遍历你返回回来的值，遍历数据的方法，取决与你后台组织好，传递过来的数据结构

//返回Map 【data.key 就可以取到 value】如下：
fhxxlist = data.fhxxlist;

//返回 List<Map<String,Object>> 或者 List，遍历方法如下：
$.each(fhxxlist, function(i, fhxx) {
});

} else {
hideLoading();
showAlert($(".container-fluid"), "提示:", data.error, "warring", true);
}
},
}    //这里你可以编写响应三种不同的分页组件后需要处理的逻辑，也就是回调函数

}).on("pageClicked", function (event, pageIndex) {
$("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + '<br />');
}).on('jumpClicked', function (event, pageIndex) {
$("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + '<br />');
}).on('pageSizeChanged', function (event, pageSize) {
$("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '<br />');
});

}

回到顶部

3.后台java类进行处理的两个公共方法

a.分页组件传递一个 pagesize 和 pageindex ，需要返回datas 和 total;

b.1)方法根据 countsql 查询出来的总条数, pageindex 来计算出总共需要多少页，并返回一个二维数组，没有用List是因为我觉得，二维数据已经够用了；

4000
   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);

        logger.info("total ====" + total + " pagesize===" + pagesize + " page====" + page);

        int[][] pagearray = new int[page][pagesize];

        int j = 1;

        for(int i = 0;i<page;i++){

           for (int k = 0;k<pagesize;k++){

               pagearray[i][k] = j;

               j++;               

           }

        }

        return pagearray;

    }

    

    /**

      * 描述：根据请求的 pageindex ,取出一个开始到结束的区间，并且在这个区间里面查询需要展示到前台的数据集合，返回给前台

      */

    public Map<String,Object> createPagination(String countsql,String cxxxsql,String retname,int pageSize,int pageIndex){           

        Map <String,Object> result = new HashMap<String,Object>();

        List<Map<String, Object>> countlist;

        try {

            countlist = selecter.select2list(countsql);

            int count = Integer.parseInt(countlist.get(0).get("count").toString());

          if(count == 0){                 

                 result.put("error", "没有查询到信息,请变更查询条件！");

                 result.put("total", 0);

             }else{

              int[][] pagearray = getPagearray(count,pageSize);

                    String jtxxsql = "SELECT * " +

                          "  FROM (SELECT P.*, ROWNUM RID " +

                          "          FROM (" + cxxxsql + ") P) " +

                          " WHERE RID BETWEEN "+ pagearray[pageIndex][0] +" AND "+ pagearray[pageIndex][pageSize - 1] ;  

                 List<Map<String,Object>> cxxxlist = selecter.select2list(jtxxsql);

                 result.put("success",true);

                 result.put("total",count);

                 result.put("data", pagearray[pageIndex]);

                 result.put(retname, cxxxlist);

            }

        } catch (DataOptException e) {

            e.printStackTrace();

        }

        return result;

    }