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

发布时间：2020-12-15 20:34:36 所属栏目：asp.Net 来源：网络整理

导读：效果： js：复制代码代码如下: $.fn.extend({ JPager: function (cfg,pageIndex,pageSize) { if (cfg pageIndex 0 pageSize0) { var token = "#" + this.attr("id"); this.empty(); var pageFirst = function () { $(token).JPager(cfg,1,pageSize); }; va

效果：

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,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",
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 },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; } 
} 
} 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!