ajax分页插件

创建

/**
 *  {
 *      "curpage": 1,
 *      "pagesize": 10,
 *      "total": 100,
 *  }
 */
(function(a){
    $.fn.extend({
        pageable: function(options, fn) {
            if (fn == undefined || fn.name == undefined) {
                console.log("回调函数名未定义");
                return;
            }
            var curpage = 1; pagesize = 10; total = 0;
            if (options != undefined) {
                if (options.curpage != undefined && options.curpage > 0) {
                    curpage = options.curpage;
                }
                if (options.pagesize != undefined && options.pagesize > 0) {
                    pagesize = options.pagesize;
                }
                if (options.total != undefined && options.total >= 0) {
                    total = options.total;
                }
            }
            var _html = "<div class='span6'></div>" +
                "<div class='span6'>" +
                "<div class='dataTables_paginate paging_bootstrap pagination'>" +
                "<ul>";
            if (total == 0) {
                // TODO do nothing
            } else if (total <= pagesize) {
                _html += "<li class='active'><a href='javascript:"+fn.name+"(1, "+pagesize+")'>1</a></li>";
            } else {
                var page = Math.ceil(total / pagesize); // 总页数
                if (page <= 7) { // 总页数小于7
                    for (var i = 1; i <= page; i++) {
                        if (i == curpage) {
                            _html += "<li class='active'><a hre='javascript:void(0);'>"+i+"</a></li>";
                        } else {
                            _html += "<li><a href='javascript:"+fn.name+"("+i+", "+pagesize+")'>"+i+"</a></li>";
                        }
                    }
                } else { // 总共页数大于7
                    if (curpage <= 4 || curpage > (page - 4)) { // 当前页<=4 或者 当前页>=(totle-4)
                        var idx = curpage <= 4 ? 5 : 4;
                        for (var i = 1; i < idx; i++) {
                            if (i == curpage) {
                                _html += "<li class='active'><a hre='javascript:void(0);'>"+i+"</a></li>";
                            } else {
                                _html += "<li><a href='javascript:"+fn.name+"("+i+", "+pagesize+")'>"+i+"</a></li>";
                            }
                        }
                        _html += "<li><a hre='javascript:void(0);'>...</a></li>";
                        var _idex = (curpage > (page - 4)) ? 3 : 2;
                        for (var i = (page - _idex); i <= page ; i++) {
                            if (i == curpage) {
                                _html += "<li class='active'><a hre='javascript:void(0);'>"+i+"</a></li>";
                            } else {
                                _html += "<li><a href='javascript:"+fn.name+"("+i+", "+pagesize+")'>"+i+"</a></li>";
                            }
                        }
                    } else { // 当前页在中间
                        _html += "<li><a href='javascript:"+fn.name+"(1, "+pagesize+");'>1</a></li>";
                        _html += "<li>...</li>";
                        for (var i = curpage - 3; i <= curpage + 3 && i < page; i++) {
                            if (i == curpage) {
                                _html += "<li class='active'><a hre='javascript:void(0);'>"+i+"</a></li>";
                            } else {
                                _html += "<li><a href='javascript:"+fn.name+"("+i+", "+pagesize+");'>"+i+"</a></li>";
                            }

                        }
                        if (page - curpage > 4) {
                            _html += "<li><a hre='javascript:void(0);'>...</a></li>";
                        }
                        _html += "<li><a href='javascript:"+fn.name+"("+page+", "+pagesize+");'>"+page+"</a></li>";
                    }
                }
            }

            _html +=    "</ul>" +
                    "</div>" +
                "</div>";
            this.html(_html);
        }
    });
})(window);

使用

$.ajax({
    "url": "${ctx!}/studyCourse/getStudyStatistics",
    type: "get",
    dataType: "json",
    data: {
        "pageNumber": curpage,
        "pageSize": pagesize
    },
    success: function (resp) {
        var _html = "";
        for (var key in resp.data.content) {
            var entity = resp.data.content[key];
            _html += "<tr></tr>";
        }
        $("#table2").html(_html);
        // 设置分页
        $("#pageDiv2").pageable({
            curpage: curpage,
            pagesize: pagesize,
            total: resp.total
        }, {
            name: "CallBacllMethodName" // 点击分页回调的方法,此方法需要接受两个参数,当前页和每页显示条数
        });
    }
});