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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript常用方法汇总
Dec 02 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
解决vue addRoutes不生效问题
Aug 04 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游戏编程25个脚本代码
2011/02/08 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python多线程扫描端口示例
2014/01/16 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python学习 流程控制语句详解
2016/06/01 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python实现单机五子棋
2020/08/28 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
幼儿园的门卫岗位职责
2014/04/10 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
无线电知识基础入门篇
2022/02/18 无线电
vue实现简易音乐播放器
2022/08/14 Vue.js