通过Ajax实现无刷新分页

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

 

•原理说明：

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

<script type="text/javascript">
        var PageSize = 5;
        var AllRecordCount = 0;

        function PageSelectCallback(page_id, jq) {
            InitData(page_id);
        }

        function InitData(pageindx) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "StudyHistoryPager.ashx",  //调用ashx文件，指定路径
                data: "PageIndex=" + (pageindx + 1) + "&PageSize=" + PageSize + "&KnowledgeID=" + '<%=KnowledgeID %>',//通过传入ashx文件的参数

                complete: function () {
                    $("#FAQList").fadeIn("slow");
                    $("#Pagination").show();
                    $("#divload").hide();
                },
　　　　　　　　　　//json是从ashx文件返回的数据
                success: function (json) {
                    var tbody = "<table cellspacing='0' cellpadding='2' border='0' width='100%'>";
                    $("#FAQList").empty();
                    for (var key in json) {
                        if (key == "0") {
                            AllRecordCount = json[key].AllRecordCount;
                        }
                        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>";
                        tbody += trs;

                    }
                    tbody += "</table>";

                    if (AllRecordCount < 1) {
                        $("#FAQList").append("<div class='ac'>很抱歉，暂时没有学习记录。</div>");
                    }
                    else {
                        $("#FAQList").append(tbody);
                        $("#Pagination").show().pagination(AllRecordCount, {
                            callback: PageSelectCallback,
                            prev_text: '上一页',
                            next_text: '下一页',
                            items_per_page: PageSize,
                            num_display_entries: 5,
                            current_page: pageindx,
                            num_edge_entries: 2
                        });
                    }
                }
            });
        }
        window.onload = function () {
            InitData(0);
        }
    </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)在页面中接收到返回的查询结果后进行分页。

效果如下：

原创，转载请说明出处。