一款Jquery 分页插件的改造方法（服务器端分页）

<div class="panelBar">
<div class="pages">
<span>显示</span>
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" })
<span>条，共 @Model.TotalCount 条</span>
</div>
<div class="pagination" totalcount="@Model.TotalCount" numperpage="@Model.NumPerPage"
pagenumshown="@Model.PageNumShown" currentpage="@Model.CurrentPage">
</div>

(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();
}
});
}
};

(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 class="#liClass#"><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);

<?xml version="1.0" encoding="utf-8"?>
<_AJAX_>
<!-- pagination -->
<_PAGE_ id="pagination"><![CDATA[
<ul>
<li class="j-first">
<a class="first" href="#"><span>首页</span></a>
<span class="first"><span>首页</span></span>
</li>
<li class="j-prev">
<a class="previous" href="#"><span>上一页</span></a>
<span class="previous"><span>上一页</span></span>
</li>
#pageNumFrag#
<li class="j-next">
<a class="next" href="#"><span>下一页</span></a>
<span class="next"><span>下一页</span></span>
</li>
<li class="j-last">
<a class="last" href="#"><span>末页</span></a>
<span class="last"><span>末页</span></span>
</li>
<li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value="确定" /></li>
</ul>
]]></_PAGE_>
</_AJAX_>

@charset "utf-8";
/* CSS Document */
/* public */
ul li,ol li,dt,dd {list-style:none;}
a:link{
color:#000000;
text-decoration:none;
}
a:visited{
color:#000000;
text-decoration:none;
}
a:hover{
color:#000000;
text-decoration:underline;
}
/* pagination */
.panelBar{
margin-top:12px;
height:26px;
line-height:26px;
}
.panelBar ul{
float:left;
}
.panelBar ul li{
float:left;
}
.disabled{
padding:0 6px;
}
.j-num{
padding:0 4px;
}
.pages
{
margin-top:12px;
float:left;
}
.pagination
{
float:left;
padding-left:50px;
}
.pagination li, .pagination li.hover { padding:0 0 0 5px;}
.pagination a, .pagination li.hover a, .pagination li span { float:left; display:block; padding:0 5px 0 0; text-decoration:none; line-height:23px; background-position:100% -150px;}
.pagination li.selected a{color:red; font-weight:bold;}
.pagination span, .pagination li.hover span { float:left; display:block; height:23px; line-height:23px; cursor:pointer;}
.pagination li .first span, .panelBar li .previous span { padding:0 0 0 10px;}
.pagination li .next span, .panelBar li .last span { padding:0 10px 0 0;}
.pagination li .first span { background:url(images/pagination/pagination_first_a.gif) left 5px no-repeat;}
.pagination li .previous span { background:url(images/pagination/pagination_previous_a.gif) left 5px no-repeat;}
.pagination li .next span { background:url(images/pagination/pagination_next_a.gif) right 5px no-repeat;}
.pagination li .last span { background:url(images/pagination/pagination_last_a.gif) right 5px no-repeat;}
.pagination li .last { margin-right:5px;}
.pagination li.disabled { background:none;}
.pagination li.disabled span, .grid .pagination li.disabled a { background-position:0 100px; cursor:default;}
.pagination li.disabled span span { color:#666;}
.pagination li.disabled .first span { background:url(images/pagination/pagination_first_span.gif) left 5px no-repeat;}
.pagination li.disabled .previous span { background:url(images/pagination/pagination_previous_span.gif) left 5px no-repeat;}
.pagination li.disabled .next span { background:url(images/pagination/pagination_next_span.gif) right 5px no-repeat;}
.pagination li.disabled .last span { background:url(images/pagination/pagination_last_span.gif) right 5px no-repeat;}
.pagination li.disabled .last { margin-right:5px;}
.pagination li.jumpto { padding:2px 2px 0 7px; background-position:0 -200px;}
.pagination li.jumpto .jumptotext { float:left; width:30px; height:15px; padding:1px; border-color:#acaeaf; background:#ffffff; border:1px solid #9999cc;}
.pagination li.jumpto .goto { float:left; display:block; overflow:hidden; width:16px; height:19px; border:0; text-indent:-1000px; background:url(images/pagination/pagination_goto.gif) no-repeat; cursor:pointer;}

$(function(){
$("div.pagination").each(function () {
var $this = $(this);
$this.pagination({
totalCount: $this.attr("totalCount"),
numPerPage: $this.attr("numPerPage"),
pageNumShown: $this.attr("pageNumShown"),
currentPage: $this.attr("currentPage")
});
});
});

function PageBreak(args) {
alert(args["pageNum"]||args["numPerPage"]);
}