本文實例為大家分享了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無刷新分頁實現的關鍵代碼,希望對大家的學習有所幫助。