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 相关文章推荐
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
js中switch case循环实例代码
Dec 30 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
微信小程序工具函数封装
Oct 28 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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_MySQL教程-第一天
2007/03/18 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python中偏函数用法示例
2018/06/07 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python实现字符串和数字拼接
2020/03/02 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
python实现学生通讯录管理系统
2021/02/25 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
六查六看剖析材料
2014/02/15 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
公司年会策划方案
2014/05/17 职场文书
119消防日活动总结
2014/08/29 职场文书
邀请函样本
2015/02/02 职场文书
求职自我推荐信
2015/03/24 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL