Jquery+JSon 无刷新分页实现代码


Posted in Javascript onApril 01, 2010

控件类代码:

using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Linq; 
using System.Text; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Reflection; 
using System.IO; 
[assembly: WebResource("PageBarJS.js", "application/x-javascript")] 
namespace Hawkon.Control { 
[DefaultProperty("Text")] 
[ToolboxData("<{0}:PageBar runat=server></{0}:PageBar>")] 
public class PageBar : WebControl { 
[Bindable(true)] 
[Category("Data")] 
[DefaultValue("1")] 
[Localizable(true)] 
public int PageIndex { 
get { 
return pageIndex; 
} 
set { 
pageIndex = value; 
} 
} 
private int pageIndex; 
[Bindable(true)] 
[Category("Data")] 
[DefaultValue("1")] 
[Localizable(true)] 
public int PageCount { 
get { 
return pageCount; 
} 
set { 
pageCount = value; 
} 
} 
private int pageCount; 
[Bindable(true)] 
[Category("Data")] 
[DefaultValue("5")] 
[Localizable(true)] 
public int DisplayCount { 
get { 
return displayCount; 
} 
set { 
displayCount = value; 
} 
} 
private int displayCount; 
protected override void RenderContents(HtmlTextWriter output) { 
string html = ""; 
html += CreateA(1, "<<"); 
int b = 0, e = 0; 
if (pageIndex <= displayCount) { 
b = 1; 
e = displayCount * 2 + 1; 
} 
else if (pageIndex > pageCount - displayCount) { 
b = pageCount - displayCount * 2; 
e = pageCount; 
} 
else { 
b = pageIndex - displayCount; 
e = pageIndex + displayCount; 
} 
if (b <= 1) { 
html += CreateA(1, ""); 
} 
else 
html += CreateA(b - 1, ""); 
for (int i = b; i <= e; i++) { 
html += CreateA(i, i.ToString()); 
} 
html += CreateA(e + 1, ""); 
html += CreateA(pageCount, ">>"); 
// html += string.Format("<script src='{0}' type='text/javascript'></script>", 
// this.Page.ClientScript.GetWebResourceUrl(typeof(PageBar), "JScript1.js")); 
output.Write(html); 
} 
private string CreateA(int pageIndex, string text) { 
if (pageIndex == this.pageIndex) { 
return string.Format("<a class=\"pageA\" title='页' id =\"{0}\">{1}</a> ", pageIndex, text); 
} 
return string.Format("<a class=\"pageA\" title='页' href=\"#\" id=\"{0}\">{1}</a> ", pageIndex, text); 
} 
protected override void OnPreRender(EventArgs e) { 
base.OnPreRender(e); 
string resourceName = "PageBarJS.js"; 
string url = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "PageBarJS.js"); 
string script = "\r\n<script src=\"" + HttpUtility.HtmlAttributeEncode(url) + "\" type=\"text/javascript\"></script>"; 
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), resourceName, script, false); 
script = @"<script type=""text/javascript"">$(document).ready(function() {InitPageBar(5, ""BookListByPage"", ""Books "", 50,""pageA"");});</script>"; this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ready", script); 
} 
protected override void Render(HtmlTextWriter writer) { 
base.Render(writer); 
} 
} 
}

JS资源文件代码:
var displayCount; 
var getDataUrl; 
var bookTableId; 
var currentIndex; 
var pageCount; 
var linkClass; 
var fields; 
function InitPageBar(dc, gdu, btId,pc,lc) { 
displayCount = dc; 
getDataUrl = gdu; 
bookTableId = btId; 
currentIndex = 1; 
pageCount = pc; 
linkClass = "."+lc; 
$(linkClass).click(GetPage); 
} 
function GetPageById(id) { 
$("#CI").val(id); 
var surl = getDataUrl+"?pageIndex=" + id; 
$.ajax({ 
url: surl, 
type: "GET", 
dataType: "json", 
timeout: 1000, 
success: showResult 
} 
); 
} 
function GetPage() { 
GetPageById($(this).get(0).id); 
} 
function showResult(result) { 
for (i = 1; i <= result.Data.length; i++) { 
var id = "#" + bookTableId + " tr:nth-child(" + i + ")"; 
obj = result.Data[i - 1]; 
for (var key in obj) { 
ctl = $(id).find("." + key); 
if (ctl.length > 0) { 
ctl.get(0).innerHTML = obj[key]; 
} 
} 
} 
$(linkClass).each(function(index) { 
var i, b, e; 
if (result.CurrentPageIndex <= displayCount) { 
b = 1; 
e = (displayCount + 1) * 2; 
i = index - 2 + 1; 
} 
else if (result.CurrentPageIndex > pageCount - displayCount) { 
b = pageCount - displayCount * 2; 
e = pageCount; 
i = pageCount - displayCount * 2 + index - 2; 
} 
else { 
i = result.CurrentPageIndex - displayCount + index - 2; 
b = result.CurrentPageIndex - displayCount - 1; 
e = result.CurrentPageIndex + displayCount + 1; 
} 
if ($(this).get(0).id == $(this).text()) { 
$(this).text(i); 
} 
else if (index == 1) { 
if (b <= 1) { 
$(this).get(0).id = 1; 
} 
else { 
$(this).get(0).id = b - 1; 
} 
} 
else if (index == displayCount * 2 + 3) { 
$(this).get(0).id = e; 
} 
$(this).attr("href", "#"); 
if ((i >= b) && (i <= e)) { 
$(this).get(0).id = i; 
} 
if ($(this).text == result.CurrentPageIndex) { 
$(this).removeAttr("href"); 
} 
}); 
currentIndex = result.CurrentPageIndex; 
}

HTML页面代码:
<form runat="server" id="form1"> 
<div> 
<asp:Repeater ID="rptBooks" runat="server"> 
<HeaderTemplate> 
<table id="Books" width="90%" cellspacing="0" style="font-size:12px;"> 
<tr> 
<th> 
书名 
</th> 
<th> 
作者 
</th> 
<th> 
类别 
</th> 
<th width="30px"> 
</th> 
<th width="30px"> 
</th> 
</tr> 
<tbody id="Data"> 
<tr> 
</HeaderTemplate> 
<ItemTemplate> 
<td class="Title"> 
<%# Eval("Title") %> 
</td> 
<td class="Author"> 
<%# Eval("Author") %> 
</td> 
<td class="CategoryName"> 
<%# Eval("Categories.Name")%> 
</td> 
<td> 
<a href="#" id='<%# Eval("Id") %>' class="delBook">删除</a> 
</td> 
<td> 
<a href='BookDetail/<%# Eval("Id") %>' class="details">详细</a> 
</td> 
</ItemTemplate> 
<SeparatorTemplate> 
</tr><tr> 
</SeparatorTemplate> 
<FooterTemplate> 
</tr></tbody> 
<tr> 
<td colspan="3"> 
<cc1:PageBar ID="PageBar1" runat="server" PageCount="100" DisplayCount="5" PageIndex="1" /> 
<input type="text" id = "CI" /> 
</td> 
</td> 
</tr> 
</table> 
</FooterTemplate> 
</asp:Repeater> 
</div> 
</form>

Ajax请求地址返回的JSON数据:
{"Data":[{"Title":"C#.NET程序设计——国外计算机科学经典教材","CategoryName":".NET","Author":"布拉德利(Bradley,J.C.),米尔斯波(Millspaugh,A.C.) 著, 天宏工作室 译","Id":5392},{"Title":"C#2.0〔宝典)(附盘)","CategoryName":"C C++ VC VC++","Author":"张立 编著","Id":5027},{"Title":"C#2.0完全自学手册(附CD)","CategoryName":"C C++ VC VC++","Author":"张立 等编著","Id":5081},{"Title":"C#2005数据库编程经典教程","CategoryName":"C C++ VC VC++","Author":"(美)沃顿(Karli watton) 著,陈秋萍 译","Id":4983},{"Title":"C#程序设计教程——计算机基础课程系列教材","CategoryName":"C C++ VC VC++","Author":"郑阿奇,梁敬东 主编","Id":5127},{"Title":"C#程序员参考手册","CategoryName":"C C++ VC VC++","Author":"Grant Palmer 著,康博 译","Id":5132},{"Title":"C#和.NET核心技术——开发人员专业技术丛书","CategoryName":"C C++ VC VC++","Author":"(美)佩里(Perry,S.C.) 著,肖斌 等译","Id":5104},{"Title":"C#基础与实例教程(附CD-ROM光盘一张)","CategoryName":"C C++ VC VC++","Author":"郝春强 编著","Id":5071},{"Title":"C#软件项目开发全程剖析","CategoryName":"C C++ VC VC++","Author":"(德)侯姆,(德)克鲁格,(德)斯普达 著,薛兴涛,袁勤勇 译","Id":5034},{"Title":"C#设计模式——开发大师系列","CategoryName":"C C++ VC VC++","Author":"(美)麦斯科 著,颜炯 译","Id":4954}],"CurrentPageIndex":15,"PageCount":1074}
Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
原生js生成图片验证码
Oct 11 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #Javascript
基于jquery的tab切换 js原理
Apr 01 #Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 #Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 #Javascript
JQuery autocomplete 使用手册
Apr 01 #Javascript
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
跟老齐学Python之重回函数
2014/10/10 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
政风行风评议心得体会
2014/10/21 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers