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


Posted in Javascript onJanuary 04, 2012

效果:

分享一个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; } 
} 
}
Javascript 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
JS验证码实现代码
Sep 14 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 #Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 #Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 #Javascript
js 遍历对象的属性的代码
Dec 29 #Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php使用session二维数组实例
2014/11/06 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
使用svg实现动态时钟效果
2018/07/17 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python标准库之collections包的使用教程
2017/04/27 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python实现复制大量文件功能
2019/08/31 Python
python中有关时间日期格式转换问题
2019/12/25 Python
简单了解python列表和元组的区别
2020/05/14 Python
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
金融学专业大学生职业生涯规划
2014/03/07 职场文书
有关爱国演讲稿
2014/05/07 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
检讨书范文2000字
2015/01/28 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang