一直在用AspNetPager.dll这个服务器端分页控件很好使，但最近产品总是要求在分页上要使用无刷新技术AspNetPager就无法使用了，公司里也有不少人写了几个分页控件封装的都不好，不利于重复使用，于是自己按照AspNetPager的设计写了这么一个jquery插件。
它的优点是配置多，可以方便地控制，但目前css类名不支持可配置的，大家可以通过改源码或者添加配置属性。我这里贴上js源码，附件中有完整的例子。
/* * JS分页控件，V1.0 * * Copyright 2011, Leo.Liu mail:wuyis.llq@gmail.com * * 用法一：$.ecpAjaxPager.renderControl(当前页数, 总记录数, 每页大小, 容器ID, 翻页回调函数, 设置); * 例如$.ecpAjaxPager.renderControl(pageindex, 148, pagesize, 'pager1', pageChange, { showFirstLast: true, showPrevNext: true, showPageSize: true, showNumberButton: true }); * 用法二：var htmlContent = $.ecpAjaxPager.renderControl(当前页数, 总记录数, 每页大小, null, null, 设置); //修改htmlContent的内容之后设置到DOM上 $.ecpAjaxPager.bindEvent(容器ID, 翻页回调函数); * 例如var htmlContent = $.ecpAjaxPager.renderControl(pageindex, 98, pagesize); $('#pager2').html(pageHTML); $.ecpAjaxPager.bindEvent('pager2', pageChange); * 注：设置的写法为：{ showFirstLast: true, showPrevNext: true, showPageSize: true, showNumberButton: true } */ jQuery.extend({ ecpAjaxPager: { //设置默认的配置节 setConfig: function (cusSetting) { if (!cusSetting) cusSetting = {}; if (!cusSetting.alwaysShow) //该值指定是否总是显示Pager分页按件 cusSetting.alwaysShow = false; if (!cusSetting.showFirstLast) //该值指示是否在页导航元素中显示第一页和最后一页按钮 cusSetting.showFirstLast = false; if (!cusSetting.showPrevNext) //该值指示是否在页导航元素中显示上一页和下一页按钮 cusSetting.showPrevNext = false; if (typeof (cusSetting.showPageIndex) == 'undefined') //该值指示是否在页导航元素中显示页索引数值按钮 cusSetting.showPageIndex = true; if (!cusSetting.showNumberButton) //该值指示是否在页导航元素中显示跳转到某页按钮 cusSetting.showNumberButton = false; if (!cusSetting.showPageSize) //该值指定是否显示每页大小选择器 cusSetting.showPageSize = false; if (!cusSetting.selectPageIndex) //该值指示每页大小的候选值 cusSetting.selectPageIndex = [10, 20, 30, 40]; if (!cusSetting.numberButtonCount) //该值指示控件的页导航元素中同时显示的数值按钮的数目 cusSetting.numberButtonCount = 10; return cusSetting; }, //生成分页控件 renderControl: function (currentPageIndex, totalCount, pageSize, containerID, callback, setting) { setting = this.setConfig(setting); //计算和校验数据 totalCount = parseInt(totalCount); totalCount = totalCount > 0 ? totalCount : 0; pageSize = parseInt(pageSize); pageSize = (pageSize && pageSize > 0) ? pageSize : 10; var pageCount = Math.floor((totalCount + pageSize - 1) / pageSize); currentPageIndex = parseInt(currentPageIndex); currentPageIndex = currentPageIndex < 1 ? 1 : currentPageIndex; currentPageIndex = currentPageIndex > pageCount ? pageCount : currentPageIndex; if (pageCount <= 1 && !setting.alwaysShow) { this.renderHTML(containerID, '', callback); return ''; } var pageHTML = '<div class="pagerWraaper">'; //生成设置每页大小的下拉框 if (setting.showPageSize) { pageHTML += '<span class="">每页显示<select id="selPageSize" class="">'; $.each(setting.selectPageIndex, function (i, item) { pageHTML += '<option value="' + item + (item == pageSize ? '" selected="selected"' : '"') + '>' + item + '</option>'; }); pageHTML += '</select>条</span> ' + currentPageIndex + '/' + pageCount + '页(' + totalCount + '项)'; } else { pageHTML += '<input type="hidden" id="selPageSize" value="' + pageSize + '" />'; } //生成首页链接 if (currentPageIndex <= 1) { if (setting.showFirstLast) pageHTML += '<span class="page-icon iconFirst disabled"><<</span>'; if (setting.showPrevNext) pageHTML += '<span class="page-icon iconBack disabled"><</span>'; } else { if (setting.showFirstLast) pageHTML += '<a class="page-icon iconFirst" pageindex="1"><<</a>'; if (setting.showPrevNext) pageHTML += '<a class="page-icon iconBack" pageindex="' + (currentPageIndex - 1) + '"><</a>'; } //生成分页列表 if (setting.showPageIndex) { var ne_half = Math.ceil(setting.numberButtonCount / 2); var ne_limit = pageCount - setting.numberButtonCount; var start = currentPageIndex > ne_half ? Math.max(Math.min(currentPageIndex - ne_half, ne_limit), 1) : 1; var end = currentPageIndex > ne_half ? Math.min(currentPageIndex + ne_half - 1, pageCount) : Math.min(setting.numberButtonCount, pageCount); pageHTML += '<span class="pagerIndex">'; for (var i = start; i <= end; i++) { //******* if (i == currentPageIndex) pageHTML += '<span class="on">' + i + '</span>'; else pageHTML += '<a pageindex="' + i + '">' + i + '</a>'; } pageHTML += '</span>'; } //生成尾页链接 if (currentPageIndex >= pageCount) { if (setting.showPrevNext) pageHTML += '<span class="page-icon iconNext disabled">></span>'; if (setting.showFirstLast) pageHTML += '<span class="page-icon iconLast disabled">>></span>'; } else { if (setting.showPrevNext) pageHTML += '<a class="page-icon iconNext" pageindex="' + (currentPageIndex + 1) + '">></a>'; if (setting.showFirstLast) pageHTML += '<a class="page-icon iconLast" pageindex="' + pageCount + '">>></a>'; } //生成跳转代码 if (setting.showNumberButton) { pageHTML += '<span>跳转到第<input type="text" id="tbGoToPage" class="textField1">页</span><input type="button" id="btnGoToPage" value="GO" class="toPageNo">'; } pageHTML += '</div>'; this.renderHTML(containerID, pageHTML, callback); return pageHTML; }, renderHTML: function (containerID, pageHTML, callback) { if (containerID) { //如果不设置此值，可以先修改分页控件的html代码之后，再调用bindEvent方法来绑定事件 $('#' + containerID).html(pageHTML); this.bindEvent(containerID, callback); } }, //绑定事件 bindEvent: function (containerID, callback) { //分页事件 $('#' + containerID + ' a').each(function (i, item) { if ($(item).attr('pageindex')) { $(item).bind('click', function () { callback($(item).attr('pageindex'), $('#' + containerID + ' #selPageSize').val()); }); } }); //跳转 $('#' + containerID + ' #btnGoToPage').bind('click', function () { var page = $('#' + containerID + ' #tbGoToPage').val(); if (!page || !page.match(/^\d+$/i)) { alert('请输入要跳转到的页数'); $('#' + containerID + ' #tbGoToPage').focus(); return; } callback(page, $('#' + containerID + ' #selPageSize').val()); }); // $('#' + containerID + ' #tbGoToPage').bind('keyup', function (event) { // if (event.keyCode == '13') { // var page = $('#' + containerID + ' #tbGoToPage').val(); // if (!page || !page.match(/^\d+$/i)) { // alert('请输入要跳转到的页数'); // $('#' + containerID + ' #tbGoToPage').focus(); // return; // } // //callback(page, $('#' + containerID + ' #selPageSize').val()); // } // }); //设置页大小 $('#' + containerID + ' #selPageSize').bind('change', function () { callback(1, $('#' + containerID + ' #selPageSize').val()); }); } } });
附件：js分页控件代码
