[Html] <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "AjaxJson. aspx. cs" Inherits = "AjaxJson" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <title> Jquery + Ajax + Json paging </title> <meta http-equiv =" content-type "content =" text/html; charset = gb2312 "> <link href =" Styles/tablecloth.css "rel =" stylesheet "type =" text/css "/> <link href =" Styles/pagination.css "rel =" stylesheet "type =" text/css "/> <script type =" text/javascript "src =" Scripts/jquery-1.4.4.min.js "> </script> <script type =" text/javascript "src =" Scripts/jquery. pagin Ation. js "> </script> <script type =" text/javascript "> var pageIndex = 0; // the initial value of the page index var pageSize = 10; // initialize the number of entries displayed on each page, modify the number of display items. Modify $ (function () {InitTable (0); // Load event to initialize table data. The page index is 0 (the first page) // page, pageCount is the total number of entries, which is a required parameter. Other parameters are optional $ ("# Pagination "). pagination (<% = pageCount %>, {callback: PageCallback, prev_text: 'previous page', // text next_text: 'Next page' in the previous page button, // text items_per_page in the next page button: pageSize, // Number of display entries num_display_e Ntries: 6, // Number of paginated items in the main part of the continuous page current_page: pageIndex, // Number of index num_edge_entries on the current page: 2 // number of first and last pagination entries on both sides }); // call function PageCallback (index, jq) {InitTable (index);} // request data function InitTable (pageIndex) {$. ajax ({type: "POST", dataType: "json", url: 'supplyajax. aspx ', // submit the data to the General processing program request data: "type = show & random =" + Math. random () + "& pageIndex =" + (pageIndex + 1) + "& pageSize =" + pageSize, // submit two parameters: pageIndex (Page index), pageSize (number of display items) error: function () {alert ('error data') ;}, // The execution method of the error success: function (data) {$ ("# Result tr: gt (0 )"). remove (); // remove the rows in the table whose Id is Result, starting from the second row (this is changed according to the page layout) var json = data; // array var html = ""; $. each (json. data, function (index, item) {// obtain data in a loop var id = item. id; var name = item. name; var sex = item. sex; html + = "<tr> <td>" + id + "</td> <td>" + name + "</td> <td>" + sex + "< /td> </t R> ";}); $ (" # Result "). append (html); // append the returned data to the table }});}}); </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
