Implement refreshing pagination with Ajax and refreshing pagination with ajax

Implement refreshing pagination with Ajax and refreshing pagination with ajax
Source: Beijing. • Principles:

(1) converting data on the page into JSON data through JS (JavaScript Object Notation is a lightweight data exchange format)

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 ", // call the ashx file, specify the path 14 data:" PageIndex = "+ (pageindx + 1) + "& PageSize =" + PageSize + "& KnowledgeID =" + '<% = KnowledgeID %>', // pass in the parameters of the ashx File 15 16 complete: function () {17 $ ("# FAQList "). fadeIn ("slow"); 18 $ ("# Pagination "). show (); 19 $ ("# divload "). hide (); 20}, 21 // json is the data returned from the ashx file 22 success: function (json) {23 var tbody = "<table cellspacing = '0' cellpadding = '2' border = '0' width = '000000'>"; 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 = 'Le Ft 'width = '000000' style = 'border-bottom: # ccc 1px dashed; '>  & nbsp; "+ json [key]. createTimeString + "& nbsp; <span class = 'red'>" + json [key]. userName + "</span> learned this article. </Td> </tr> "; 30 tbody + = trs; 31 32} 33 tbody + =" </table> "; 34 35 if (AllRecordCount <1) {36 $ ("# FAQList "). append ("<div class = 'ac'> sorry, there is no learning record at the moment. </Div> "); 37} 38 else {39 $ (" # FAQList "). append (tbody); 40 $ ("# Pagination "). show (). pagination (AllRecordCount, {41 callback: PageSelectCallback, 42 prev_text: 'previous page', 43 next_text: 'Next page', 44 items_per_page: PageSize, 45 rows: 5, 46 current_page: pageindx, 47 rows: 248}); 49} 50} 51}); 52} 53 window. onload = function () {54 InitData (0); 55} 56 </script>

 

(2) upload the data to a "general handler (. ashx)" at the same time )"

Public void ProcessRequest (HttpContext context) {// do not allow the browser to cache 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 Query Logic
// Set the query parameter 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); // query contract information 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>    /// Convert the DataTable to JSON    /// </summary>    /// <param name="dtb">Dt</param>    /// <Returns> JSON string </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);         }        // Serialization        return jss.Serialize(dic);    }

(3) query data in the ashx file and return the query result to the page.

(4) The returned query results are displayed on the page by page.

The effect is as follows:

Original, reprinted please describe the source.