分享一个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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP合并静态文件详解
2014/11/14 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python模块 _winreg操作注册表
2020/02/05 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
司机的工作范围及职责
2013/11/13 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
社区文明倡议书
2015/04/28 职场文书
个人求职意向书
2015/05/11 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python