ajax无刷新分页的简单实现
程序员文章站
2022-05-26 09:54:50
本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下
html页
<...
本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下
html页
<html>
<head>
<title></title>
<style type="text/css">
table{ border:solid 1px #444; background-color:aqua;}
table td{border:solid 1px #444;}
</style>
<script src="js/jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var pageindex = 1;
var pagesize = 10;
/*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行
根据传递的页码和每页显示的记录数量获取数据
*/
function loaddata() {
$.ajax({
type: "post",
contenttype: "application/json",
url: "webservice1.asmx/getlistajax",
data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
success: function (result) {
//处理返回来的数据
var strtable = '<table>';
strtable += '<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>';
for (var i = 0; i < result.d.length; i++) {
strtable += '<tr>';
strtable += '<td>' + result.d[i].id + '</td>';
strtable += '<td>' + result.d[i].newstitle + '</td>';
strtable += '<td>' + result.d[i].newscontent + '</td>'
strtable += '<td>' + result.d[i].createtime + '</td>';
strtable += '</tr>';
}
strtable += '</table>';
$('#mydiv').html(strtable);
}
})
}
//根据传递到后台的每页显示的记录数量来获取最大的页码(就是一共有多少页)
$.ajax({
type: "post",
contenttype: "application/json",
url: "webservice1.asmx/getlastpageindex",
data: "{pagesize:" + pagesize + "}",
success: function (result) {
lastpageindex = result.d;
}
})
//显式调用函数，在页面初次加载时加载第一页数据
loaddata();
//下一页
$('a:eq(2)').click(function () {
if (pageindex < lastpageindex) {
pageindex++;
loaddata();
}
})
//上一页
$('a:eq(1)').click(function () {
if (pageindex > 1) {
pageindex--;
loaddata();
}
})
//第一页
$('a:first').click(function () {
pageindex = 1;
loaddata();
})
//最后一页
$('a:eq(3)').click(function () {
pageindex = lastpageindex;
loaddata();
})
$('a:last').click(function () {
pageindex = $('#txtpageindex').val();
loaddata();
})
})
</script>
</head>
<body>
<div id="mydiv">
</div>
<div><a href="#">第一页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">最后一页</a><input
id="txtpageindex" type="text" /><a href="#">go</a></div>
</body>
</html>
webservice1.asmx
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.services;
using system.data;
namespace 分页
{
/// <summary>
/// webservice1 的摘要说明
/// </summary>
[webservice(namespace = "http://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
[system.componentmodel.toolboxitem(false)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消对下行的注释。
[system.web.script.services.scriptservice]
public class webservice1 : system.web.services.webservice
{
[webmethod]
public string helloworld()
{
return "hello world";
}
[webmethod]
public list<model.t_news1> getlistajax(int pagesize,int pageindex)
{
bll.t_news1 bnews = new bll.t_news1();
datatable dt = bnews.getlistdatatable(pagesize,pageindex);
list<model.t_news1> list = new list<model.t_news1>();
int id;
string newstitle = "";
string newscontent = "";
datetime createtime;
for (int i = 0; i < dt.rows.count; i++)
{
id = convert.toint32(dt.rows[i]["id"]);
newstitle = dt.rows[i]["newstitle"].tostring();
newscontent = dt.rows[i]["newscontent"].tostring();
createtime = convert.todatetime(dt.rows[i]["createtime"]);
model.t_news1 news = new model.t_news1()
{
id = id,
newstitle = newstitle,
newscontent = newscontent,
createtime = createtime
};
list.add(news);
}
return list;
}
[webmethod]
public int getlastpageindex(int pagesize)
{
bll.t_news1 bnews = new bll.t_news1();
int totalcount = bnews.getrecordcount("");
if (totalcount % pagesize == 0)
{
return totalcount / pagesize;
}
else
{
return totalcount / pagesize + 1;
}
}
}
}
以上就是ajax无刷新分页实现的关键代码，希望对大家的学习有所帮助。
上一篇： ajax实现无刷新省市县三级联动
下一篇： ajax传递多个参数的实现代码