Jquery + JSON refreshing pagination

There are a lot of non-refresh pages related to jquery + JSON on the Internet. Most of them use pagination paging plug-ins.

The case of online download, after self-testing, extracted the core part, added a detailed comment, hope to help you.

 

1. Use jquery paginati to extract the core part and add a detailed comment on the page
2. Stored Procedure processing includes sqlssrver2000/sqlssrver2005
3. Ashx background
4. Includes two jsonhelper. CS and sqlhelper. CS processing class front-end Ajax
   <SCRIPT type = "text/JavaScript">
   
   $ (). Ready (function (){
   Initdata (0 );
   $ ("# Pagetheme"). Change (function (){
   $ ("# Pagination"). ATTR ('class', $ (this). Val ());
   });
   });
   // Callback function
   Function pageselectcallback (page_id ){
   Initdata (page_id );
   }
   // Initial data
   Function initdata (pageindx ){
   VaR tbody = "";
   $. Ajax ({
   Type: "Post ",
   Datatype: "JSON ",
   URL: "handler. ashx ",
   Data: "P =" + (pageindx + 1 ),
   Success: function (JSON ){
   $ ("# Producttable TR: GT (0)"). Remove (); // remove all records after the first entry. Otherwise, the logs will be accumulated.
   VaR productdata = JSON. Table;
   $. Each (productdata, function (I, n ){
   VaR TRS = "";
   TRS + = "<tr> <TD>" + N. orderid + "</TD> <TD>" + N. customerid + "</TD> <TD>" + N. shipname + "</TD> <TD>" + N. shipcity + "</TD> </tr> ";
   Tbody + = TRS;
   
   })
   $ ("# Producttable"). append (tbody); // add content to it
   
   }
   });

   // Pagination jquery
   $ ("# Pagination"). pagination (<% = pagecount %> ,{
   Callback: pageselectcallback,
   Prev_text: '«previous ',
   Next_text: 'Next »',
   Items_per_page: 20,
   Num_display_entries: 6,
   Current_page: pageindx,
   Num_edge_entries: 2
   });
   }
   
   </SCRIPT> handler. ashx processing submitted by Ajax

   <% @ Webhandler Language = "C #" class = "handler" %>

   Using system;
   Using system. Web;
   Using system. Data;
   Public class handler: ihttphandler {
   
   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 ["p"], out pageindex );

   If (pageindex = 0)
   Pageindex = 1;
   
   
   Datatable dt = sqlhelper. gettablepager2005 ("orderid, customerid, shipname, shipcity", "orders", "", "orderid DESC", pageindex, 20 );
   String jsondata = jsonhelper. datetabletojson (DT, "table"); // convert to JSON
   Context. response. Write (jsondata );
   }
    
   Public bool isreusable {
   Get {
   Return false;
   }
   }

   }

Source File Download