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相册效果代码(点击创建即可)
Apr 16 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Angular8 实现table表格表头固定效果
Jan 03 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
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP中用hash实现的数组
2011/07/17 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
详解Python多线程下的list
2020/07/03 Python
Python 爬虫性能相关总结
2020/08/03 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
入党自我鉴定范文
2013/10/04 职场文书
小学生读书感言
2014/02/12 职场文书
借款协议书
2014/04/12 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
财务负责人岗位职责
2015/02/03 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Elasticsearch 配置详解
2022/04/19 Java/Android