JQuery与JSon实现的无刷新分页代码


Posted in Javascript onSeptember 13, 2011

如图   JQuery与JSon实现的无刷新分页代码
而无刷新分页可以解决这个问题,上面播放着视频,下面我点下一页看着评论,现在大部分的网站都是无刷新分页。
源码如下(我是采用一页显示10条记录):
需要四个文件
一个实体类文件 CategoryInfoModel.cs
一个SqlHelper SQLHelper.cs
一个AJAX服务端处理程序 PagedService.ashx
一个客户端调用页面 WSXFY.htm
CategoryInfoModel.cs和SQLHelper.cs我就不写了,都知道是什么文件
PagedService.ashx 代码如下

using System.Web.Script.Serialization; 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string strAction = context.Request["Action"]; 
//取页数 
if (strAction == "GetPageCount") 
{ 
string strSQL = "SELECT COUNT(*) FROM CategoryInfo"; 
int intRecordCount = SqlHelper.ExecuteScalar(strSQL); 
int intPageCount = intRecordCount / 10; 
if (intRecordCount % 10 != 0) 
{ 
intPageCount++; 
} 
context.Response.Write(intPageCount); 
}//取每页数据 
else if (strAction == "GetPageData") 
{ 
string strPageNum = context.Request["PageNum"]; 
int intPageNum = Convert.ToInt32(strPageNum); 
int intStartRowIndex = (intPageNum - 1) * 10 + 1; 
int intEndRowIndex = (intPageNum) * 10 + 1; 
string strSQL = "SELECT * FROM ( SELECT ID,CategoryName,Row_Number() OVER(ORDER BY ID ASC) AS rownum FROM CategoryInfo) AS t"; 
strSQL += " WHERE t.rownum >= " + intStartRowIndex + " AND t.rownum <= " + intEndRowIndex; 
DataSet ds = new DataSet(); 
SqlConnection conn = SqlHelper.GetConnection(); 
ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, strSQL); 
List<CategoryInfoModel> categoryinfo_list = new List<CategoryInfoModel>();//定义实体集合 
for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
{ 
CategoryInfoModel categoryinfo = new CategoryInfoModel(); 
categoryinfo.CategoryInfoID = Convert.ToInt32(ds.Tables[0].Rows[i]["ID"]); 
categoryinfo.CategoryName = ds.Tables[0].Rows[i]["CategoryName"].ToString(); 
categoryinfo_list.Add(categoryinfo); 
} 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.Write(jss.Serialize(categoryinfo_list));//序列化实体集合为javascript对象 
} 
}

WSXFY.htm 代码如下
<head> 
<title>无刷新分页</title> 
<script type="text/javascript" src="../Scripts/jquery-1.5.1.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
$.post("PagedService.ashx", { "Action": "GetPageCount" }, function (response, status) { 
for (var i = 1; i <= response; i++) { 
var td = $("<td><a href=''>" + i + "</a></td>"); 
$("#trPage").append(td); 
td.click(function (e) { 
e.preventDefault(); //不要导向链接 
$.post("PagedService.ashx", { "Action": "GetPageData", "PageNum":$(this).text() }, function (response, status) { 
var categorys = $.parseJSON(response); 
$("#ulCategory").empty(); 
for (var i = 0; i < categorys.length; i++) { 
var category = categorys[i]; 
var li = $("<li>" + category.CategoryInfoID + "-" + category.CategoryName + "</li>"); 
$("#ulCategory").append(li); 
} 
}); 
}); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<ul id="ulCategory"></ul> 
<table> 
<tr id="trPage"> 
</tr> 
</table> 
</body> 
</html>

效果如下(页面好不好看取决于你画DOM 的水平了,我这里只是简单的画了画)
JQuery与JSon实现的无刷新分页代码
Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
js实现抽奖效果
Mar 27 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
js Event对象的5种坐标
Sep 12 #Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 #Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 #Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 #Javascript
jquery tab插件精简版分享
Sep 10 #Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 #Javascript
You might like
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vue router 组件的高级应用实例代码
2019/04/08 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python正则捕获操作示例
2017/08/19 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
中软Java笔试题
2012/11/11 面试题
开放系统互连参考模型
2016/06/29 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
英文感谢信范文
2015/01/21 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
感恩主题班会教案
2015/08/12 职场文书