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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
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/03/24 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php精度计算的问题解析
2019/06/21 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
页面中js执行顺序
2009/11/09 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
jQuery的框架介绍
2016/05/11 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
移动端界面的适配
2017/01/11 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python Deque 模块使用详解
2014/07/04 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
光电信息专业应届生求职信
2013/10/07 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
推荐信模板
2014/05/09 职场文书
会议室使用管理制度
2015/08/06 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
新手必备Python开发环境搭建教程
2021/05/28 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL