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 相关文章推荐
JS定时器实例详细分析
Oct 11 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JS实现轮播图效果
Jan 11 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
基于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
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
使用python分析git log日志示例
2014/02/27 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
临床医学应届生求职信
2013/11/06 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
结对共建协议书
2014/08/20 职场文书
月考总结与反思
2015/10/22 职场文书
护士业务学习心得体会
2016/01/25 职场文书