Use Jquery + Ajax + Json in asp.net to implement refreshing pagination

Source: Internet
Author: User

[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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.