通过Ajax实现无刷新分页

Posted 2020-06-30

出处：http://www.cnblogs.com/minioutman/archive/2013/01/31/2887051.html

效果描述：分页点击下一页、上一页时，不刷新整个页面，只更新列表数据。

 

•原理说明：

(1) 通过JS把页面上的数据转化成 JSON 数据（ javascript Object Notation， 是一种轻量级的数据交换格式）

 1 <script type="text/javascript">
 2         var PageSize = 5;
 3         var AllRecordCount = 0;
 4 
 5         function PageSelectCallback(page_id, jq) {
 6             InitData(page_id);
 7         }
 8 
 9         function InitData(pageindx) {
10             $.ajax({
11                 type: "POST",
12                 dataType: "json",
13                 url: "StudyHistoryPager.ashx",  //调用ashx文件，指定路径
14                 data: "PageIndex=" + (pageindx + 1) + "&PageSize=" + PageSize + "&KnowledgeID=" + ‘<%=KnowledgeID %>‘,//通过传入ashx文件的参数
15 
16                 complete: function () {
17                     $("#FAQList").fadeIn("slow");
18                     $("#Pagination").show();
19                     $("#divload").hide();
20                 },
21 　　　　　　　　　　//json是从ashx文件返回的数据
22                 success: function (json) {
23                     var tbody = "<table cellspacing=‘0‘ cellpadding=‘2‘ border=‘0‘ width=‘100%‘>";
24                     $("#FAQList").empty();
25                     for (var key in json) {
26                         if (key == "0") {
27                             AllRecordCount = json[key].AllRecordCount;
28                         }
29                         var trs = "<tr><td align=‘left‘ width=‘70%‘ style=‘border-bottom: #ccc 1px dashed;‘><img src=‘../Skin/Img/studyhistory.png‘ />&nbsp;&nbsp;" + json[key].CreateTimeString + "&nbsp;&nbsp;<span class=‘red‘>" + json[key].UserName + "</span>学习了该文章。</td></tr>";
30                         tbody += trs;
31 
32                     }
33                     tbody += "</table>";
34 
35                     if (AllRecordCount < 1) {
36                         $("#FAQList").append("<div class=‘ac‘>很抱歉，暂时没有学习记录。</div>");
37                     }
38                     else {
39                         $("#FAQList").append(tbody);
40                         $("#Pagination").show().pagination(AllRecordCount, {
41                             callback: PageSelectCallback,
42                             prev_text: ‘上一页‘,
43                             next_text: ‘下一页‘,
44                             items_per_page: PageSize,
45                             num_display_entries: 5,
46                             current_page: pageindx,
47                             num_edge_entries: 2
48                         });
49                     }
50                 }
51             });
52         }
53         window.onload = function () {
54             InitData(0);
55         }
56     </script>

 

(2) 同时把这些数据传到一个“一般处理程序(.ashx)”

public void ProcessRequest(HttpContext context)
        {
            //不让浏览器缓存
            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";
            context.Response.ContentType = "text/plain";

            int pageIndex;
            int.TryParse(context.Request["PageIndex"], out pageIndex);

            int pageSize;
            int.TryParse(context.Request["PageSize"], out pageSize);

            string knowledgeID = context.Request["KnowledgeID"];

            #region 查询逻辑
　　　　　　　//设置查询参数
            Hashtable searchHashTable = new Hashtable();
            Utility.CreateSearchCondition("t1.KnowledgeID", UtilityFunction.InputText(knowledgeID), "=", SqlDbType.UniqueIdentifier, "KnowledgeID", "KnowledgeID", ref searchHashTable);
            PageInfo pageInfo = new PageInfo();
            pageInfo.PageIndex = pageIndex;
            pageInfo.PageSize = pageSize;
            pageInfo.OrderField = "CreateTime DESC ";
            searchHashTable.Add("PageInfo", pageInfo);

            //查询合同信息
            StudyHistoryBLL studyHistoryBll = new StudyHistoryBLL();
            DataSet ds = studyHistoryBll.GetList(searchHashTable);

            if (ds.Tables[1].Rows.Count == 0 && pageIndex > 1)
            {
                pageInfo.PageIndex = pageIndex - 1;
                ds = studyHistoryBll.GetList(searchHashTable);
            }
            DataTable dt = ds.Tables[1];
            DataColumn column = new DataColumn();
            column.DataType = Type.GetType("System.String");
            column.ColumnName = "CreateTimeString";
            dt.Columns.Add(column);
            DataColumn column2 = new DataColumn();
            column2.DataType = Type.GetType("System.Int32");
            column2.ColumnName = "AllRecordCount";
            dt.Columns.Add(column2);
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                dt.Rows[i]["CreateTimeString"] = dt.Rows[i]["CreateTime"].ToString();
                dt.Rows[i]["AllRecordCount"] = ds.Tables[0].Rows[0][0];
            }
　　　　　　　#endregion　
            string jsonData = JsonUtility.DataTableToJson(dt);

            context.Response.Write(jsonData);
        }

/// <summary>     /// 将DataTable转换为JSON      /// </summary>     /// <param name="dtb">Dt</param>     /// <returns>JSON字符串</returns>     public static string DataTableToJson(DataTable dt)     {         JavaScriptSerializer jss = new JavaScriptSerializer();         System.Collections.ArrayList dic = new System.Collections.ArrayList();         foreach (DataRow dr in dt.Rows)         {             Dictionary<string, object> drow = new Dictionary<string, object>();             foreach (DataColumn dc in dt.Columns)             {                 drow.Add(dc.ColumnName, dr[dc.ColumnName]);             }             dic.Add(drow);           }         //序列化          return jss.Serialize(dic);     }

(3)在ashx文件中查询数据，然后将查询结果返回到页面。

(4)在页面中接收到返回的查询结果后进行分页。

效果如下：

原创，转载请说明出处。