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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
Javascript的无new构建实例详解
May 15 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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编程注意事项的小结
2013/04/27 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
Js四则运算函数代码
2012/07/21 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
详解Python中的路径问题
2020/09/02 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
小学生志愿者活动方案
2014/08/23 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
单身申明具结书
2015/02/26 职场文书
天气温馨提示语
2015/07/14 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL