分享一个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不是基础的基础
Dec 24 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
调试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 文件缓存的性能测试
2010/04/25 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
vue获取input输入值的问题解决办法
2017/10/17 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
浅析Python 责任链设计模式
2020/09/11 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
人力资源专员自我评价怎么写
2013/09/19 职场文书
物业招聘计划书
2014/01/10 职场文书
国培教师自我鉴定
2014/02/12 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
工人先锋号申报材料
2014/12/29 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书