jquery.pagination.js分页插件的使用

1、引用jquery.pagination.js

<script src="${ctx}/themes/b2b2cv2/doctor/js/message/jquery.pagination.js"></script>
 
2、发送2次ajax请求,第一次需传入首页和页大小,返回数据得到所有数据的长度;
  第二次发送请求传入点击的页码号和页的大小,返回数据得到点击页的数据
 
  参考链接:
    1、https://blog.csdn.net/baidu_25343343/article/details/70478467
    2、https://blog.csdn.net/Fanbin168/article/details/49847931
  代码如下:
  var pageSize = 2;                //声明页大小的变量
        var dataCount, pageCount;
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                pageSize: pageSize,    //第一次ajax请求需传的参数
                pageNumber: 1
            },
            dataType: 'json',
            cache: false,
            success: function(datas) {
                console.log(datas.data.list);
                if(datas.result == 1) {
                    var html = template('tpl', {
                        list: datas.data.list,
                    });
                    $(className).html(html);
                }
                dataCount = datas.data.count;  //返回的数据获得数据库中所有数据的数量,
                pageCount = Math.ceil(dataCount / pageSize);//算出总页数
                $('.M-box').pagination({
                    pageCount: pageCount,  //总页数
                    coping: true,
                    homePage: '首页',
                    endPage: '末页',
                    prevContent: '<< 上一页',
                    nextContent: '下一页 >>',
                    callback: function(api) {
                        console.log(api.getCurrent())
                        var currentPage = api.getCurrent();  //获取当前点击的页码
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                pageSize: pageSize,   //第二次请求需传入的参数(页码的长度及当前点击的页码)
                                pageNumber: currentPage
                            },
                            dataType: 'json',
                            cache: false,
                            success: function(datas) {
                                console.log(datas);
                                if(datas.result == 1) {
                                    var html = template('tpl', {
                                        list: datas.data.list
                                    });
                                    $(className).html(html);
                                }
                            },
                            error: function() {
                                alert("请求接口失败。")
                            }
                        })
                    }
                });
            },
            error: function() {
                alert("请求失败!!!")
            }
        })

 

posted @ 2018-06-14 15:21 wh666888 阅读(...) 评论(...) 编辑 收藏