jquery+bootstrap分页控件

jquery+bootstrap分页控件

源码：

 

(function ($) {
    $.fn.extend({
        ftx_pager: function (paraObj) {
            var total = paraObj.total > 0 ? paraObj.total : 0;
            var rows = paraObj.rows > 0 ? paraObj.rows : 20;
            var curpage = paraObj.curpage > 0 ? paraObj.curpage * 1 : 1;
            var totalpage = parseInt(total / rows);
            if (total % rows > 0) {
                totalpage++;
            }
            curpage = curpage > totalpage ? totalpage : curpage;
            var showPageNoBegin = 1;
            var showPageNoEnd = 10;
            if (curpage > 5) {
                showPageNoBegin = curpage - 4;
                showPageNoEnd = curpage + 5;
            }
            if (showPageNoEnd > totalpage) {
                showPageNoEnd = totalpage;
                showPageNoBegin = totalpage - 9 > 0 ? totalpage - 9 : 1;
            }
            showPageNoBegin = totalpage == 0 ? 0 : showPageNoBegin;

            var html = '<ul class="pagination">';
            if (curpage == 1 || curpage == 0) {
                html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">首页</a></li >';
                html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">上页</a></li >';
            }
            else {
                html += '<li pno="1" class="page-item"><a class="page-link" href="javascript:void(0);">首页</a></li >';
                html += '<li pno="' + (curpage - 1) + '" class="page-item"><a class="page-link" href="javascript:void(0);">上页</a></li >';
            }
            for (var i = showPageNoBegin; i <= showPageNoEnd; i++) {
                if (i == curpage) {
                    html += '<li class="page-item active"><a class="page-link" href="javascript:void(0);">' + i + '</a></li>';
                }
                else {
                    html += '<li pno="' + i + '" class="page-item"><a class="page-link" href="javascript:void(0);">' + i + '</a></li>';
                }
            }
            if (curpage == totalpage) {
                html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">下页</a></li>';
                html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">末页</a></li>';
            }
            else {
                html += '<li pno="' + (curpage + 1) + '" class="page-item"><a class="page-link" href="javascript:void(0);">下页</a></li>';
                html += '<li pno="' + totalpage + '" class="page-item"><a class="page-link" href="javascript:void(0);">末页</a></li>';
            }
            html += '<li class="page-item"><select class="pager_rows">'
            html += '   <option value="10">10</option><option value="20">20</option><option value="50">50</option>'
            html += '   <option value="100">100</option><option value="500">500</option><option value="1000">1000</option>'
            html += '</select></li>'
            html += '<li class="page-item"><span class="page-link">共' + total + ' 记录</span></li>';
            html += '</ul >';
            $(this).html(html);
            $(this).attr("curpage", curpage);
            $(this).attr("total", total);
            $(this).find(".pager_rows").val(rows);
            $(this).each(function () {
                var $self = $(this);
                $(this).find("li").click(function () {
                    if ($(this).attr("pno") && $(this).attr("pno") > 0) {
                        $self.attr("curpage", $(this).attr("pno"));
                        $self.trigger("pagechange", [$(this).attr("pno"), $self.find(".pager_rows").val()]);
                    }
                });
                $(this).find(".pager_rows").change(function (a, b) {
                    var i_total = $self.attr("total");
                    var i_rows = $self.find(".pager_rows").val();
                    var i_totalpage = parseInt(i_total / i_rows);
                    if (i_total % i_rows > 0) {
                        i_totalpage++;
                    }
                    var i_curpage = $self.attr("curpage");
                    i_curpage = i_curpage > i_totalpage ? i_totalpage : i_curpage;
                    $self.trigger("pagechange", [i_curpage, i_rows]);
                });
            });
            return $(this);
        }
    })
})(jQuery);

页面元素：

< div name ="pager"></ div >

调用方式：

 $( "div[name='pager']").ftx_pager({

      total: 3, rows: 1, curpage: 1

  });

添加事件： jquery+bootstrap分页控件

$( "div[name='pager']").bind( "pagechange", function (event, pageIndex, rows) {            

      

});