JQuery与JSon实现的无刷新分页代码_jquery

如图  
而无刷新分页可以解决这个问题,上面播放着视频,下面我点下一页看着评论,现在大部分的网站都是无刷新分页。
源码如下(我是采用一页显示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 的水平了,我这里只是简单的画了画)

时间: 2025-01-21 09:51:26

JQuery与JSon实现的无刷新分页代码_jquery的相关文章

Json的Ajax无刷新分页效果

Json的Ajax无刷新分页效果 这一篇我讲接着写利用json读取数据以及和分页器绑定实现无刷新的分页效果 //根据当前页读取数据        function BindCommentList(page) {            $.post("/Ajax/Elec_Comment/GetData.asp教程x", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>', page:

JQuery JSon 无刷新分页代码

需要四个文件 一个实体类文件 CategoryInfoModel.cs 一个SqlHelper SQLHelper.cs 一个AJAX服务端处理程序 PagedService.ashx 一个客户端调用页面 WSXFY.htm CategoryInfoModel.cs和SQLHelper.cs我就不写了,都知道是什么文件 PagedService.ashx 代码如下 using System.Web.Script.Serialization; public void ProcessRequest(

基于jquery的无刷新分页技术_jquery

复制代码 代码如下: <script src="script/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var index = 0; $(document).ready(function () { $.post("Default5.aspx", { name: i

Jquery:ajax实现翻页无刷新功能代码_jquery

不多说,直接贴代码: 下面是js部分: 复制代码 代码如下: var pageSize = "10";//每页行数 var currentPage = "1";//当前页 var totalPage = "0";//总页数 var rowCount = "0";//总条数 var params="";//参数 var url="activity_list.action";//action

求一个.net 和AJAX 结合的无刷新分页代码

问题描述 希望能给一个能用的例子!c#谢谢了 解决方案 解决方案二:写过,夹在里项目里的代码.给你也没有.自己写吧.输出HTML代码就行了解决方案三:能不能给我一个简单的例子啊谢谢了发邮箱也行melack@163.com

ajax +php无刷新分页代码(1/2)

 代码如下 复制代码 //index.php文件 header("content-type: text/html; charset=utf-8"); error_reporting(e_all^e_notice); include('pagination_class.php'); mysql教程_connect('localhost', 'root', '') or die(mysql_error()); mysql_select_db('mydemo'); mysql_query(&

ajax+php+mysql无刷新分页代码(1/2)

 代码如下 复制代码 <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">   2  <html>   3  <head>   4     <title>投票结果</title>   5     <meta http-equiv="conte

用jquery和json从后台获得数据集的代码_jquery

其实Json也就是一种数据的格式,在后台将数据封转为一种格式,然后在前台用相同的方法解析,类似于序列化.json格式主要是由键值对组成,它可以表示多个数据.比如 {name:zhangsan,age:12,class:1} 同时json 还可以表示一个数据集,它是又{}和: 来组成的.比如我们需要从数据库查询出一张表格,然后将表格传输给前台,但是dataset是不能直接传输的,我们需要将dataset数据转换为json数据,这样可以方便前台js解析数据,下面我来写一下转换的格式 {Name:表的

JQuery 获取json数据$.getJSON方法的实例代码_jquery

 前台:  复制代码 代码如下:  function SelectProject() {            var a = new Array;            var r = window.showModalDialog('SelProject.aspx', a, "dialogWidth=1000px; dialogHeight=600px; resizable: yes");            if (typeof (r) != 'undefined') {