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) {? ? ? ? ? ?? });

總結

以上是生活随笔為你收集整理的jquery+bootstrap分页控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。