Javascript實現無刷新分頁

本文轉載自查看原文 2012-10-27 16:34 4324 JavaScript

　　通過Javascript實現無刷新分頁，把后台得到的數據以Table的形式顯示出來，獲取第index頁的數據是通過異步請求得到的。

不過這里創建顯示數據的Table我是用拼接字符串的，然后innerHTML賦值的。

　　效果圖：

1、后台獲取數據

通過一般處理程序獲取get請求中的index頁，然后查詢數據。

View Code

 1 <%@ WebHandler Language="C#" Class="GetPage" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Collections.Generic;
 6 using System.Web.Script.Serialization;
 7 using System.Data;
 8 
 9 public class GetPage : IHttpHandler {
10     
11     public void ProcessRequest (HttpContext context) {
12         context.Response.ContentType = "text/plain";
13         string strIndex = context.Request.QueryString["index"];
14         int index=1,pageCount=0;
15         
16         int pageSize = 4;//每一頁4條數據
17         //返回的集合
18         List<LoginInfo> list = new List<LoginInfo>();
19         
20         //轉換成功
21         if (int.TryParse(strIndex, out index))
22         {
23             //獲取總的數據條數
24             string strSQL1 = "select count(0) from LoginInfo ";
25             int countTotle = Convert.ToInt32(SQLHelper.ExecuteScalar(strSQL1, System.Data.CommandType.Text));
26             //獲取總頁數
27             pageCount = countTotle % pageSize == 0 ? countTotle / pageSize : countTotle / pageSize + 1;
28             //獲取第Index頁的數據
29 
30             string strSQL2 = @"select * from(select *,row_number() over(order by LoginId DESC) as num from LoginInfo) as tb
31                               where num>={0} and num<={1}  order by LoginId DESC";
32 
33             strSQL2 = string.Format(strSQL2, pageSize * (index - 1) + 1, pageSize * index);
34 
35             //分頁數據表

36             DataTable dt = SQLHelper.GetTable(strSQL2);
37             if (dt.Rows.Count > 0)
38             {
39                 foreach (DataRow dr in dt.Rows)
40                 {
41                     LoginInfo item = new LoginInfo();
42                     item.LoginId = Convert.ToInt32(dr["LoginId"]);
43                     item.LoginName = dr["LoginName"].ToString();
44                     item.LoginPwd = dr["LoginPwd"].ToString();
45                     item.Email = dr["Email"].ToString();
46                     list.Add(item);
47                 }
48             }
49 
50             JavaScriptSerializer jss = new JavaScriptSerializer();
51             //返回數據
52             string str = jss.Serialize(new { data = list, count = pageCount });
53 
54             context.Response.Write(str);
55         }
56     }
57  
58     public bool IsReusable {
59         get {
60             return false;
61         }
62     }
63 
64 }

2、前台接收展示數據

在前台展示數據時候，首先有一個全局的XMLHttpRequest對象，該對象是通過方法CreateXMR創建的，用於發送請求使用。

View Code

 1         //創建請求對象的方法
 2         function CreateXMR() {
 3             var xmr = null;
 4             if (window.XMLHttpRequest)
 5                 xmr = new XMLHttpRequest();
 6             else
 7                 xmr = new ActiveXObject("Microsoft.XMLHTTP");
 8             
 9             return xmr;
10         }

還需要就是通過第index頁創建對應Table的方法CreateTable(index) ，該方法通過發送異步請求返回數據，創建表格對象，創建完數據表格
后還需要創建數字導航。創建數字導航在方法CreateNumBar(index, totle)中實現。

View Code

 1          //異步創建表格的過程
 2         function CreateTable(pageIndex) {
 3             //不符合條件跳出
 4             if (pageCount != 0 && pageIndex > pageCount || pageIndex<1) {
 5                 return;
 6             }
 7 
 8             var arrJson;//數據數組
 9             var strTable;   //拼接的表格字符串
10 
11             request.open("get", "GetPage.ashx?index=" + pageIndex, true);
12 
13             request.onreadystatechange = function () {
14                 if (request.readyState == 4 && request.status == 200) {
15                     var json = eval('(' + request.responseText + ')');
16                     arrJson = json.data;
17                     pageCount = json.count;
18 
19                     strTable = "<table border='1px' cellspacing='0px' class='pageTable'><tbody>";
20                     //表頭
21                     strTable += "<tr><td>編號</td><td>登錄名</td><td>密碼</td><td>郵箱</td><tr>";
22 
23                     for (var i = 0, len = arrJson.length; i < len; i++) {
24                         strTable += "<tr><td>" + arrJson[i].LoginId + "</td>";
25                         strTable += "<td>" + arrJson[i].LoginName + "</td>";
26                         strTable += "<td>" + arrJson[i].LoginPwd + "</td>";
27                         strTable += "<td>" + arrJson[i].Email + "</td></tr>";
28                     }
29                     strTable += "</tbody></table>";
30                     strTable += "<div class='pageBar'><a onclick='CreateTable(" + (pageIndex - 1) + ")'>上一頁</a>";
31                     //數字導航
32                     strTable += CreateNumBar(pageIndex, pageCount);
33 
34                     strTable += "<a onclick='CreateTable(" + (pageIndex + 1) + ")'>下一頁</a>";
35 
36                     strTable += pageIndex + "/" + pageCount + "</div>";
37 
38                     document.getElementById("div1").innerHTML = strTable;
39                 }
40 
41             }
42             request.send(); 
43           }

創建數字導航的方法CreateNumBar(index,totle)

View Code

 1           //創建數字導航
 2           function CreateNumBar(index, totle) {
 3               //默認顯示10個
 4               var strLink="";
 5               var start=index;
 6               var end=start+9;
 7 
 8               if (start < 1) {
 9                   start = 1;
10                   end = 10;
11               }
12               if (end > totle) {
13                   start = totle - 9;
14                   if (start < 1)
15                       start = 1;
16                   end = totle;
17                }
18               for (var i = start; i <=end; i++) {
19                   if (i == index)
20                       strLink += "&nbsp;<a>" + i + "</a>&nbsp;";
21                   else
22                       strLink+="&nbsp;<a onclick=CreateTable("+i+")> ["+i+"]</a>&nbsp;";
23                 }
24 
25                 return strLink;
26            }

最后，就是在窗體加載時候請求第一頁數據。

View Code

1         //窗體加載
2         window.onload = function () {
3             //請求第一頁
4             CreateTable(1);
5         }

這里還定義了一個全局的變量記錄總頁數的 var pageCount = 0; //總頁數

前台完整的代碼是：

View Code

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5     <title></title>
  6     <style type="text/css">
  7     #div1
  8     {
  9         margin:0 auto;
 10         width:500px;
 11     }
 12     .pageTable
 13     {
 14         height:200px;
 15         width:500px;
 16     }
 17     .pageBar
 18     {
 19         width:500px;
 20         margin-top:10px;
 21         height:30px;
 22     }
 23     .pageBar a
 24     {
 25         color:Blue;
 26         cursor:pointer;
 27     }
 28     
 29     </style>
 30 
 31     <script type="text/javascript">
 32         var pageCount = 0;      //總頁數
 33         //請求對象
 34         var request = CreateXMR();
 35         //創建請求對象的方法
 36         function CreateXMR() {
 37             var xmr = null;
 38             if (window.XMLHttpRequest)
 39                 xmr = new XMLHttpRequest();
 40             else
 41                 xmr = window.ActiveXObject("Mirosoft.XMLHTTP");
 42             
 43             return xmr;
 44         }
 45         //窗體加載
 46         window.onload = function () {
 47             //請求第一頁
 48             CreateTable(1);
 49         }
 50          //異步創建表格的過程
 51         function CreateTable(pageIndex) {
 52             //不符合條件跳出
 53             if (pageCount != 0 && pageIndex > pageCount || pageIndex<1) {
 54                 return;
 55             }
 56 
 57             var arrJson;//數據數組
 58             var strTable;   //拼接的表格字符串
 59 
 60             request.open("get", "GetPage.ashx?index=" + pageIndex, true);
 61 
 62             request.onreadystatechange = function () {
 63                 if (request.readyState == 4 && request.status == 200) {
 64                     var json = eval('(' + request.responseText + ')');
 65                     arrJson = json.data;
 66                     pageCount = json.count;
 67 
 68                     strTable = "<table border='1px' cellspacing='0px' class='pageTable'><tbody>";
 69                     //表頭
 70                     strTable += "<tr><td>編號</td><td>登錄名</td><td>密碼</td><td>郵箱</td><tr>";
 71 
 72                     for (var i = 0, len = arrJson.length; i < len; i++) {
 73                         strTable += "<tr><td>" + arrJson[i].LoginId + "</td>";
 74                         strTable += "<td>" + arrJson[i].LoginName + "</td>";
 75                         strTable += "<td>" + arrJson[i].LoginPwd + "</td>";
 76                         strTable += "<td>" + arrJson[i].Email + "</td></tr>";
 77                     }
 78                     strTable += "</tbody></table>";
 79                     strTable += "<div class='pageBar'><a onclick='CreateTable(" + (pageIndex - 1) + ")'>上一頁</a>";
 80                     //數字導航
 81                     strTable += CreateNumBar(pageIndex, pageCount);
 82 
 83                     strTable += "<a onclick='CreateTable(" + (pageIndex + 1) + ")'>下一頁</a>";
 84 
 85                     strTable += pageIndex + "/" + pageCount + "</div>";
 86 
 87                     document.getElementById("div1").innerHTML = strTable;
 88                 }
 89 
 90             }
 91             request.send(); 
 92           }
 93 
 94           //創建數字導航
 95           function CreateNumBar(index, totle) {
 96               //默認顯示10個
 97               var strLink="";
 98               var start=index;
 99               var end=start+9;
100 
101               if (start < 1) {
102                   start = 1;
103                   end = 10;
104               }
105               if (end > totle) {
106                   start = totle - 9;
107                   if (start < 1)
108                       start = 1;
109                   end = totle;
110                }
111               for (var i = start; i <=end; i++) {
112                   if (i == index)
113                       strLink += "&nbsp;<a>" + i + "</a>&nbsp;";
114                   else
115                       strLink+="&nbsp;<a onclick=CreateTable("+i+")> ["+i+"]</a>&nbsp;";
116                 }
117 
118                 return strLink;
119            }
120     </script>
121 </head>
122 <body>
123 <div id="div1">
124 </div>
125 </body>
126 </html>

--------------------------------------------------------

哦，有一個問題是json格式中的時間為 /Date(1351134618423)/ 這一種格式的數據，它表示的是從XX到現在經過毫秒，

要把這個格式的時間轉換為 2012-10-27 12:13:14格式的。這里提供一個方法ChangeDateFormat(cellval)。

View Code

 1        //將序列化成json格式后日期(毫秒數)轉成日期格式
 2         function ChangeDateFormat(cellval) {
 3             var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
 4             var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
 5             var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
 6             var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
 7             var minu = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
 8             var sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
 9 
10             return date.getFullYear() + "-" + month + "-" + currentDate+" "+hour+":"+minu+":"+sec;
11         }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 thinkphp下實現ajax無刷新分頁 ajax實現無刷新分頁效果 Bootstrap Paginator分頁插件+ajax 實現動態無刷新分頁分頁技術原理與實現(三)——無刷新的Ajax分頁技術 jQuery實現無刷新【增、刪、改、查、分頁】（MVC）在Thinkphp中使用AJAX實現無刷新分頁使用jquery.pagination.js實現無刷新分頁 tp5無刷新分頁 Explain：PHP+JavaScript 實現圖片無刷新上傳 php+ajax無刷新分頁原生ajax實現分頁最簡單完整實例-完整代碼，