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 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 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
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
javascript事件模型介绍
2016/05/31 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
extern是什么意思
2016/03/10 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
安全负责人任命书
2014/06/06 职场文书
中国梦团日活动总结
2014/07/07 职场文书
学习十八大标语
2014/10/09 职场文书
2014年销售工作总结
2014/12/01 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS