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 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
vue中的inject学习教程
2019/04/24 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python实现自动上京东抢手机
2018/02/06 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
学生会干部自荐信
2014/02/04 职场文书
春节晚会主持词
2014/03/24 职场文书
医院信息公开实施方案
2014/05/09 职场文书
大学迎新生标语
2014/10/06 职场文书
学生个人总结范文
2015/02/15 职场文书
欠条范文
2015/07/03 职场文书