一直在用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分页控件代码
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。