首页 > 代码库 > 好用的jQuery分页插件
好用的jQuery分页插件
插件源代码：
(function ($) { $.fn.extend({ smartpaginator: function (options) { var settings = $.extend({ totalrecords: 0, recordsperpage: 0, length: 10, next: ‘下一页‘, prev: ‘上一页‘, first: ‘第一页‘, last: ‘最后一页‘, go: ‘Go‘, theme: ‘green‘, display: ‘double‘, initval: 1, datacontainer: ‘‘, //data container id dataelement: ‘‘, //children elements to be filtered e.g. tr or div onchange: null, controlsalways: false }, options); return this.each(function () { var currentPage = 0; var startPage = 0; var totalpages = parseInt(settings.totalrecords / settings.recordsperpage); if (settings.totalrecords % settings.recordsperpage > 0) totalpages++; var initialized = false; var container = $(this).addClass(‘pager1‘).addClass(settings.theme); container.find(‘ul‘).remove(); container.find(‘div‘).remove(); container.find(‘span‘).remove(); var dataContainer; var dataElements; if (settings.datacontainer != ‘‘) { dataContainer = $(‘#‘ + settings.datacontainer); dataElements = $(‘‘ + settings.dataelement + ‘‘, dataContainer); } var list = $(‘<ul/>‘); var btnPrev = $(‘<div/>‘).text(settings.prev).click(function () { if ($(this).hasClass(‘disabled‘)) return false; currentPage = parseInt(list.find(‘li a.active‘).text()) - 1; navigate(--currentPage); }).addClass(‘btn‘); var btnNext = $(‘<div/>‘).text(settings.next).click(function () { if ($(this).hasClass(‘disabled‘)) return false; currentPage = parseInt(list.find(‘li a.active‘).text()); navigate(currentPage); }).addClass(‘btn‘); var btnFirst = $(‘<div/>‘).text(settings.first).click(function () { if ($(this).hasClass(‘disabled‘)) return false; currentPage = 0; navigate(0); }).addClass(‘btn‘); var btnLast = $(‘<div/>‘).text(settings.last).click(function () { if ($(this).hasClass(‘disabled‘)) return false; currentPage = totalpages - 1; navigate(currentPage); }).addClass(‘btn‘); var inputPage = $(‘<input/>‘).attr(‘type‘, ‘text‘).keydown(function (e) { if (isTextSelected(inputPage)) inputPage.val(‘‘); if (e.which >= 48 && e.which < 58) { var value = http://www.mamicode.com/parseInt(inputPage.val() + (e.which - 48)); if (!(value > 0 && value <= totalpages)) e.preventDefault(); } else if (!(e.which == 8 || e.which == 46)) e.preventDefault(); }); var btnGo = $(‘<input/>‘).attr(‘type‘, ‘button‘).attr(‘value‘, settings.go).addClass(‘btn‘).click(function () { if (inputPage.val() == ‘‘) return false; else { currentPage = parseInt(inputPage.val()) - 1; navigate(currentPage); } }); container.append(btnFirst).append(btnPrev).append(list).append(btnNext).append(btnLast).append($(‘<div/>‘).addClass(‘short‘).append(inputPage).append(btnGo)); // container.append(btnPrev).append(list).append(btnNext); if (settings.display == ‘single‘) { btnGo.css(‘display‘, ‘none‘); inputPage.css(‘display‘, ‘none‘); } buildNavigation(startPage); if (settings.initval == 0) settings.initval = 1; currentPage = settings.initval - 1; navigate(currentPage); initialized = true; function showLabels(pageIndex) { container.find(‘span‘).remove(); var upper = (pageIndex + 1) * settings.recordsperpage; if (upper > settings.totalrecords) upper = settings.totalrecords; container.append($(‘<span/>‘).append($(‘<b/>‘).text(pageIndex * settings.recordsperpage + 1))) .append($(‘<span/>‘).text(‘-‘)) .append($(‘<span/>‘).append($(‘<b/>‘).text(upper))) .append($(‘<span/>‘).text(‘of‘)) .append($(‘<span/>‘).append($(‘<b/>‘).text(settings.totalrecords))); } function buildNavigation(startPage) { list.find(‘li‘).remove(); if (settings.totalrecords <= settings.recordsperpage) return; for (var i = startPage; i < startPage + settings.length; i++) { if (i == totalpages) break; list.append($(‘<li/>‘) .append($(‘<a>‘).attr(‘id‘, (i + 1)).addClass(settings.theme).addClass(‘normal‘) .attr(‘href‘, ‘javascript:void(0)‘) .text(i + 1)) .click(function () { currentPage = startPage + $(this).closest(‘li‘).prevAll().length; navigate(currentPage); })); } showLabels(startPage); inputPage.val((startPage + 1)); list.find(‘li a‘).addClass(settings.theme).removeClass(‘active‘); list.find(‘li:eq(0) a‘).addClass(settings.theme).addClass(‘active‘); //set width of paginator var sW = list.find(‘li:eq(0) a‘).outerWidth() + (parseInt(list.find(‘li:eq(0)‘).css(‘margin-left‘)) * 2); var width = sW * list.find(‘li‘).length; list.css({ width: width }); showRequiredButtons(startPage); } function navigate(topage) { //make sure the page in between min and max page count var index = topage; var mid = settings.length / 2; if (settings.length % 2 > 0) mid = (settings.length + 1) / 2; var startIndex = 0; if (topage >= 0 && topage < totalpages) { if (topage >= mid) { if (totalpages - topage > mid) startIndex = topage - (mid - 1); else if (totalpages > settings.length) startIndex = totalpages - settings.length; } buildNavigation(startIndex); showLabels(currentPage); list.find(‘li a‘).removeClass(‘active‘); inputPage.val(currentPage + 1); list.find(‘li a[id="‘ + (index + 1) + ‘"]‘).addClass(‘active‘); var recordStartIndex = currentPage * settings.recordsperpage; var recordsEndIndex = recordStartIndex + settings.recordsperpage; if (recordsEndIndex > settings.totalrecords) recordsEndIndex = settings.totalrecords % recordsEndIndex; if (initialized) { if (settings.onchange != null) { settings.onchange((currentPage + 1), recordStartIndex, recordsEndIndex); } } if (dataContainer != null) { if (dataContainer.length > 0) { //hide all elements first dataElements.css(‘display‘, ‘none‘); //display elements that need to be displayed if ($(dataElements[0]).find(‘th‘).length > 0) { //if there is a header, keep it visible always $(dataElements[0]).css(‘display‘, ‘‘); recordStartIndex++; recordsEndIndex++; } for (var i = recordStartIndex; i < recordsEndIndex; i++) $(dataElements[i]).css(‘display‘, ‘‘); } } showRequiredButtons(); } } function showRequiredButtons() { if (totalpages > settings.length) { if (currentPage > 0) { if (!settings.controlsalways) { btnPrev.css(‘display‘, ‘‘); } else { btnPrev.css(‘display‘, ‘‘).removeClass(‘disabled‘); } } else { if (!settings.controlsalways) { btnPrev.css(‘display‘, ‘none‘); } else { btnPrev.css(‘display‘, ‘‘).addClass(‘disabled‘); } } if (currentPage > settings.length / 2 - 1) { if (!settings.controlsalways) { btnFirst.css(‘display‘, ‘‘); } else { btnFirst.css(‘display‘, ‘‘).removeClass(‘disabled‘); } } else { if (!settings.controlsalways) { btnFirst.css(‘display‘, ‘none‘); } else { btnFirst.css(‘display‘, ‘‘).addClass(‘disabled‘); } } if (currentPage == totalpages - 1) { if (!settings.controlsalways) { btnNext.css(‘display‘, ‘none‘); } else { btnNext.css(‘display‘, ‘‘).addClass(‘disabled‘); } } else { if (!settings.controlsalways) { btnNext.css(‘display‘, ‘‘); } else { btnNext.css(‘display‘, ‘‘).removeClass(‘disabled‘); } } if (totalpages > settings.length && currentPage < (totalpages - (settings.length / 2)) - 1) { if (!settings.controlsalways) { btnLast.css(‘display‘, ‘‘); } else { btnLast.css(‘display‘, ‘‘).removeClass(‘disabled‘); } } else { if (!settings.controlsalways) { btnLast.css(‘display‘, ‘none‘); } else { btnLast.css(‘display‘, ‘‘).addClass(‘disabled‘); } }; } else { if (!settings.controlsalways) { btnFirst.css(‘display‘, ‘none‘); btnPrev.css(‘display‘, ‘none‘); btnNext.css(‘display‘, ‘none‘); btnLast.css(‘display‘, ‘none‘); } else { btnFirst.css(‘display‘, ‘‘).addClass(‘disabled‘); btnPrev.css(‘display‘, ‘‘).addClass(‘disabled‘); btnNext.css(‘display‘, ‘‘).addClass(‘disabled‘); btnLast.css(‘display‘, ‘‘).addClass(‘disabled‘); } } } function isTextSelected(el) { var startPos = el.get(0).selectionStart; var endPos = el.get(0).selectionEnd; var doc = document.selection; if (doc && doc.createRange().text.length != 0) { return true; } else if (!doc && el.val().substring(startPos, endPos).length != 0) { return true; } return false; } }); } });})(jQuery);
调用代码：
function loadPager() { $(‘#pager‘).smartpaginator({ totalrecords: total, recordsperpage: pageSize, theme: ‘green‘, controlsalways: true, onchange: function (newPage) { pageLoadData(newPage); } });}
好用的jQuery分页插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。