ajax无刷新分页的简单实现
本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下
html页
<html>
<head>
<title></title>
<styletype="text/css">
table{border:solid1px#444;background-color:Aqua;}
tabletd{border:solid1px#444;}
</style>
<scriptsrc="js/Jquery1.7.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varpageindex=1;
varpagesize=10;
/*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行
根据传递的页码和每页显示的记录数量获取数据
*/
functionloaddata(){
$.ajax({
type:"post",
contentType:"application/json",
url:"WebService1.asmx/GetListAjax",
data:"{pagesize:"+pagesize+",pageindex:"+pageindex+"}",
success:function(result){
//处理返回来的数据
varstrtable='<table>';
strtable+='<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>';
for(vari=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>
<divid="mydiv">
</div>
<div><ahref="#">第一页</a><ahref="#">上一页</a><ahref="#">下一页</a><ahref="#">最后一页</a><input
id="txtPageindex"type="text"/><ahref="#">Go</a></div>
</body>
</html>
WebService1.asmx
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Services;
usingSystem.Data;
namespace分页
{
///<summary>
///WebService1的摘要说明
///</summary>
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
//若要允许使用ASP.NETAJAX从脚本中调用此Web服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
publicclassWebService1:System.Web.Services.WebService
{
[WebMethod]
publicstringHelloWorld()
{
return"HelloWorld";
}
[WebMethod]
publicList<Model.T_News1>GetListAjax(intpagesize,intpageindex)
{
BLL.T_News1bnews=newBLL.T_News1();
DataTabledt=bnews.GetListDataTable(pagesize,pageindex);
List<Model.T_News1>list=newList<Model.T_News1>();
intId;
stringnewstitle="";
stringnewscontent="";
DateTimecreatetime;
for(inti=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_News1news=newModel.T_News1()
{
Id=Id,
NewsTitle=newstitle,
NewsContent=newscontent,
CreateTime=createtime
};
list.Add(news);
}
returnlist;
}
[WebMethod]
publicintGetLastPageindex(intpagesize)
{
BLL.T_News1bnews=newBLL.T_News1();
inttotalcount=bnews.GetRecordCount("");
if(totalcount%pagesize==0)
{
returntotalcount/pagesize;
}
else
{
returntotalcount/pagesize+1;
}
}
}
}
以上就是ajax无刷新分页实现的关键代码，希望对大家的学习有所帮助。