分页几乎是每个外部程序必不可少的东西，在webform时代很多人都用过AspNetPager这个用户控件吧，用的人之多其实就在于它的优点：传给它几个参数就可以生成像样的分页，其实这个也是绝大多数程序员(包括我)的致命缺点：样式..,我对于咱们来说用尝试用CSS把一个模块调美观好看所花的时间远远超过了实现功能所需的时间- -！
现在越来越多做web的开始采用.NET MVC框架，抛开一切服务器控件，回归正宗的B/S编程，享受灵活控制好处之余，也得花费很多功夫，很多地方都得自己去实现，例如分页这样的东西。简单实现功能肯定很简单，但是要做到好用，通用，性能好，易于修改也不是一个很简单的事情，所以各种JS分页控件大显身手，如jquery pager、jquery Pagination等等，调用很方便，生成效果也很好，唯一缺点就是都是内存分页，数据量少点还好，如果成千上万几百上千万数据可就要命了。要是能有一个调用方便还能配合进行服务端分页的前端控件该多好呢：）
说了这么多接下来就给大家看看我利用一个富客户端UI框架（DWZ）中分离改造出来的一个JS分页控件，先看看效果图：
页面代码：
复制代码 代码如下:
<div>
<div>
<span>显示</span>
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" })
<span>条，共 @Model.TotalCount 条</span>
</div>
<div totalcount="@Model.TotalCount" numperpage="@Model.NumPerPage"
pagenumshown="@Model.PageNumShown" currentpage="@Model.CurrentPage">
</div>
其实这个完全可以写成HtmlHelper调用，例如 Html.Pagination(ViewBag.dNumPerPage,Model.TotalCount,Model.NumPerPage,Model.PageNumShown,Model.CurrentPage)
这样，一条语句就可以。
原理就是用js通过获取 的div的自定义属性：总页数TotalCount，每页多少条NumPerPage ，显示多少页码 PageNumShown，当前页数CurrentPage，
然后将这四个属性传给分页js，分页js内利用这几个关键属性进行计算，然后将预制好的分页模板进行替换，展现出分页效果。
为了好让美工根据项目整体风格来对分页进行调整，实现好的分工合作的原则，这里分页的js和CSS和分页替换模板是完全分开的，不至于程序看CSS晕，美工看JS晕。
分页js分为两部分，一部分只负责根据参数计算分页（pagination.js），一部分是作之前的准备工作的（core.js），一些参数的预制，在这里其实只有一个就是分页模板的位置参数，还有一些分页内部用到的自定义扩展函数，分页模板为了美工便于修改观察，不混在js里面，而又便于js利用，这里用XML的格式（pagination.xml），先把代码贴出来
core.js：
复制代码 代码如下:
(function($){
$.extend(String.prototype, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]\d*$/).test(this));
},
replaceAll:function(os, ns) {
return this.replace(new RegExp(os,"gm"),ns);
}
});
$.fn.extend({
hoverClass: function(className){
var _className = className || "hover";
return this.each(function(){
$(this).hover(function(){
$(this).addClass(_className);
},function(){
$(this).removeClass(_className);
});
});
}
});
})(jQuery);
var DWZ = {
frag: {},
init: function (pageFrag) {
$.ajax({
type: 'GET',
url: pageFrag,
dataType: 'xml',
timeout: 50000,
cache: false,
error: function (xhr) {
alert('Error loading XML document: ' + pageFrag + "\nHttp status: " + xhr.status + " " + xhr.statusText);
},
success: function (xml) {
DWZ.frag["pagination"]= $(xml).find("#pagination").text();
}
});
}
};
pagination.js：
复制代码 代码如下:
(function($){
$.fn.pagination = function(opts){
var setting = {
first$:"li.j-first", prev$:"li.j-prev", next$:"li.j-next", last$:"li.j-last", nums$:"li.j-num>a", jumpto$:"li.jumpto",
pageNumFrag:'<li><a href="#">#pageNum#</a></li>'
};
return this.each(function(){
var $this = $(this);
var pc = new Pagination(opts);
var interval = pc.getInterval();
var pageNumFrag = '';
for (var i=interval.start; i<interval.end;i++){
pageNumFrag += setting.pageNumFrag.replaceAll("#pageNum#", i).replaceAll("#liClass#", i==pc.getCurrentPage() ? 'selected j-num' : 'j-num');
}
$this.html(DWZ.frag["pagination"].replaceAll("#pageNumFrag#", pageNumFrag).replaceAll("#currentPage#", pc.getCurrentPage())).find("li").hoverClass();
var $first = $this.find(setting.first$);
var $prev = $this.find(setting.prev$);
var $next = $this.find(setting.next$);
var $last = $this.find(setting.last$);
if (pc.hasPrev()){
$first.add($prev).find(">span").hide();
_bindEvent($prev, pc.getCurrentPage()-1, pc.targetType());
_bindEvent($first, 1, pc.targetType());
} else {
$first.add($prev).addClass("disabled").find(">a").hide();
}
if (pc.hasNext()) {
$next.add($last).find(">span").hide();
_bindEvent($next, pc.getCurrentPage()+1, pc.targetType());
_bindEvent($last, pc.numPages(), pc.targetType());
} else {
$next.add($last).addClass("disabled").find(">a").hide();
}
$this.find(setting.nums$).each(function(i){
_bindEvent($(this), i+interval.start, pc.targetType());
});
$this.find(setting.jumpto$).each(function(){
var $this = $(this);
var $inputBox = $this.find(":text");
var $button = $this.find(":button");
$button.click(function(event){
var pageNum = $inputBox.val();
if (pageNum && pageNum.isPositiveInteger()) {
PageBreak({ pageNum: pageNum });
}
});
$inputBox.keyup(function(event){
if (event.keyCode == 13) $button.click();
});
});
});
function _bindEvent(jTarget, pageNum, targetType){
jTarget.bind("click", {pageNum:pageNum}, function(event){
PageBreak({ pageNum: event.data.pageNum });
event.preventDefault();
});
}
}
var Pagination = function(opts) {
this.opts = $.extend({
targetType:"navTab", // navTab, dialog
totalCount:0,
numPerPage:10,
pageNumShown:10,
currentPage:1,
callback:function(){return false;}
}, opts);
}
$.extend(Pagination.prototype, {
targetType:function(){return this.opts.targetType},
numPages:function() {
return Math.ceil(this.opts.totalCount/this.opts.numPerPage);
},
getInterval:function(){
var ne_half = Math.ceil(this.opts.pageNumShown/2);
var np = this.numPages();
var upper_limit = np - this.opts.pageNumShown;
var start = this.getCurrentPage() > ne_half ? Math.max( Math.min(this.getCurrentPage() - ne_half, upper_limit), 0 ) : 0;
var end = this.getCurrentPage() > ne_half ? Math.min(this.getCurrentPage()+ne_half, np) : Math.min(this.opts.pageNumShown, np);
return {start:start+1, end:end+1};
},
getCurrentPage:function(){
var currentPage = parseInt(this.opts.currentPage);
if (isNaN(currentPage)) return 1;
return currentPage;
},
hasPrev:function(){
return this.getCurrentPage() > 1;
},
hasNext:function(){
return this.getCurrentPage() < this.numPages();
}
});
})(jQuery);
分页模板pagination.xml：
复制代码 代码如下: