分享一个asp.net pager分页控件

效果：

js：

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) { 
if (cfg && pageIndex > 0 && pageSize>0) { 
var token = "#" + this.attr("id"); 
this.empty(); 
var pageFirst = function () { 
$(token).JPager(cfg, 1, pageSize); 
}; 
var pagePre = function () { 
$(token).JPager(cfg, pageIndex - 1, pageSize); 
}; 
var pageLast = function () { 
$(token).JPager(cfg, parseInt($("#_tot").val()), pageSize); 
}; 
var pageNext = function () { 
$(token).JPager(cfg, pageIndex + 1, pageSize); 
}; 
var pageNumber = function () { 
$(token).JPager(cfg, parseInt($(this).text()), pageSize); 
}; 
var pageGo = function () { 
var index = parseInt($("#_pos").val()); 
var total = parseInt($("#_tot").val()); 
if (index) { 
if (index > total) { 
$(token).JPager(cfg, total, pageSize); 
} 
else if (index < 1) { 
$(token).JPager(cfg, 1, pageSize); 
} 
else { 
$(token).JPager(cfg, index, pageSize); 
} 
} 
}; 
var checkGoNumber = function () { 
if (!Number(this.value)) { 
this.value = ""; 
} 
else { 
this.value = Number(this.value); 
} 
}; 
var initCustomer = function (recordCount) { 
if (cfg.customer) { 
if (cfg.customer.template) { 
var t = cfg.customer.template; 
t = t.replace(/\%total\%/gi, Math.ceil(recordCount / pageSize)).replace(/\%current\%/gi, pageIndex).replace(/\%recordCount\%/gi, recordCount).replace(/\%pageSize\%/gi, pageSize); 
if (cfg.customer.position == "right") { 
$("#_right").after(t); 
} 
else { 
$("#_left").before(t); 
} 
} 
} 
}; 
var changeState = function (total) { 
if (pageIndex == 1) { 
$("#_first").attr("class", "unable"); 
$("#_pre").attr("class", "unable"); 
} 
else { 
$("#_first").bind("click", pageFirst).attr("class", "number"); 
$("#_pre").bind("click", pagePre).attr("class", "number"); 
} 
if (pageIndex == total) { 
$("#_last").attr("class", "unable"); 
$("#_next").attr("class", "unable"); 
} 
else { 
$("#_last").bind("click", pageLast).attr("class", "number"); 
$("#_next").bind("click", pageNext).attr("class", "number"); 
} 
}; 
var initNumber = function (total, count, current) { 
if (total > 0 && count > 0) { 
if (current < 1) { 
current = 1; 
} 
if (current > total) { 
current = total; 
} 
var endIndex = total; 
var startIndex = 1; 
var temp = current + Math.floor(count / 2); 
if (temp < total) { 
if (temp < count) { 
endIndex = count; 
} 
else { 
startIndex = temp - count + 1; 
endIndex = temp; 
} 
} 
else { 
if (total > count) { 
startIndex = total - count + 1; 
} 
} 
$("#_number").empty(); 
for (var i = startIndex; i <= endIndex; i++) { 
var html = $("<span></span>").text(i).bind("click", pageNumber); 
if (i == current) { 
$("#_number").append(html.attr("class", "selected")); 
} 
else { 
$("#_number").append(html.attr("class", "number")); 
} 
} 
} 
}; 
var initPager = function (data) { 
if ($.isArray(data.SearchResult) && data.RecordCount > 0) { 
$(token).append("<span id='_left'><span id='_first' class='spcial'>首页</span> <span id='_pre' class='spcial'>上一页</span></span> <span id='_number'></span><span id='_go'><input id='_pos' type='text'/><input id='_to' type='button' value='GO'/></span> <span id='_right'><span id='_next' class='spcial'>下一页</span> <span id='_last' class='spcial'>末页</span></span><input id='_tot' type='hidden'/>"); 
var total = Math.ceil(data.RecordCount / pageSize); 
$("#_tot").val(total); 
$("#_pos").bind("blur", checkGoNumber); 
$("#_to").bind("click", pageGo); 
changeState(total); 
if (cfg.showNumber && cfg.count > 0) { 
initNumber(total, cfg.count, pageIndex); 
} 
initCustomer(data.RecordCount); 
} 
}; 
if (cfg.action) { 
if (cfg.action.url && cfg.action.data) { 
var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}")) + ',"pageIndex":' + pageIndex + ',"pageSize":' + pageSize + "}"; 
if (cfg.action.callback && $.isFunction(cfg.action.callback)) { 
$.ajax({ 
type: "post", 
url: cfg.action.url, 
dataType: "json", 
contentType: "text/json", 
data: d, 
success: function (data) { 
initPager(data.d); 
cfg.action.callback(data.d); 
} 
}); 
} 
else { 
$.ajax({ 
type: "post", 
url: cfg.action.url, 
dataType: "json", 
contentType: "text/json", 
data: d, 
success: function (data) { 
initPager(data.d); 
} 
}); 
} 
} 
} 
} 
} 
});

css：

#_pos { 
width: 40px; 
} 
.unable 
{ 
color: #BCC0BB; 
} 
.number 
{ 
margin: 2px; 
color:#0000FF; 
text-decoration:underline; 
} 
.selected 
{ 
margin: 2px; 
color: #FF0000; 
font-weight: bold; 
}

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>分页控件示例</title> 
<link href="CSS/JPager.css" rel="stylesheet" type="text/css" /> 
<script src="JS/jquery.min.js" type="text/javascript"></script> 
<script src="JExtension/JPager.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$("#pager").JPager({ customer:{template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1,5); 
}); 
</script> 
</head> 
<body> 
<table> 
</table> 
<div id="pager"></div> 
</body> 
</html>

wcf：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Runtime.Serialization; 
using System.ServiceModel; 
using System.ServiceModel.Activation; 
using System.ServiceModel.Web; 
namespace JPlugin 
{ 
[ServiceContract] 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
public class JService 
{ 
[OperationContract] 
[WebInvoke] 
public PageObject<Person> GetPersons(string name,int pageIndex,int paseSize) 
{ 
return new PageObject<Person>(){RecordCount = 23,SearchResult = new List<Person>(){new Person(){Name="zhpulq",Age = 28},new Person(){Name = "zhouxy",Age = 24}}}; 
} 
} 
public class PageObject<T> 
{ 
public int RecordCount { get; set; } 
public List<T> SearchResult { get; set; } 
} 
}