如图   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="/UploadFiles/2021-04-02/jquery-1.5.1.min.js"><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实现的无刷新分页代码

标签:
无刷新,分页

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“JQuery与JSon实现的无刷新分页代码”

暂无“JQuery与JSon实现的无刷新分页代码”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。