ajax无刷新分页的简单实现

本文实例为大家分享了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><inputid="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无刷新分页实现的关键代码，希望对大家的学习有所帮助。