萬盛學電腦網 >> 網絡編程 >> asp.net編程 >> asp.net中利用Jquery+Ajax+Json實現無刷新分頁的實例代碼
asp.net中利用Jquery+Ajax+Json實現無刷新分頁的實例代碼
本篇文章主要是對asp.net中利用Jquery+Ajax+Json實現無刷新分頁的實例代碼進行了介紹，需要的朋友可以過來參考下，需要對大家有所幫助
代碼如下: <%@ 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分頁</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.pagination.js"></script> <script type="text/javascript"> var pageIndex = 0; //頁面索引初始值 var pageSize = 10; //每頁顯示條數初始化，修改顯示條數，修改這裡即可 $(function () { InitTable(0); //Load事件，初始化表格數據，頁面索引為0（第一頁） //分頁，PageCount是總條目數，這是必選參數，其它參數都是可選 $("#Pagination").pagination(<%=pageCount %>, { callback: PageCallback, prev_text: '上一頁', //上一頁按鈕裡text next_text: '下一頁', //下一頁按鈕裡text items_per_page: pageSize, //顯示條數 num_display_entries: 6, //連續分頁主體部分分頁條目數 current_page: pageIndex, //當前頁索引 num_edge_entries: 2 //兩側首尾分頁條目數 }); //翻頁調用 function PageCallback(index, jq) { InitTable(index); } //請求數據 function InitTable(pageIndex) { $.ajax({ type: "POST", dataType: "json", url: 'SupplyAJAX.aspx', //提交到一般處理程序請求數據 data: "type=show&random=" + Math.random() + "&pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, //提交兩個參數：pageIndex(頁面索引)，pageSize(顯示條數) error: function () { alert('error data'); }, //錯誤執行方法 success: function (data) { $("#Result tr:gt(0)").remove(); //移除Id為Result的表格裡的行，從第二行開始（這裡根據頁面布局不同頁變） var json = data; //數組 var html = ""; $.each(json.data, function (index, item) { //循環獲取數據 var id = item.Id; var name = item.Name; var sex = item.Sex; html += "<tr><td>" + id + "</td><td>" + name + "</td><td>" + sex + "</td></tr>"; }); $("#Result").append(html); //將返回的數據追加到表格 } }); } }); </script> </head> <body> <form id="form1" runat="server"> <table id="Result" cellspacing="0" cellpadding="0"> <tr> <th> 編號 </th> <th> 姓名 </th> <th> 性別 </th> </tr> </table> <div id="Pagination"> </div> </form> </body> </html> 代碼如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Text; using System.Net; using System.IO; using System.Web.UI; using System.Web.UI.WebControls; public partial class AjaxJson : System.Web.UI.Page { public string pageCount = string.Empty; //總條目數 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string url = "/SupplyAJAX.aspx"; string strResult = GetRequestJsonString(url, "type=getcount"); pageCount = strResult.ToString(); } } #region 後台獲取ashx返回的數據 /// <summary> /// 後台獲取ashx返回的數據 /// </summary> /// <param name="relativePath">地址</param> /// <param name="data">參數</param> /// <returns></returns> public static string GetRequestJsonString(string relativePath, string data) { string requestUrl = GetRequestUrl(relativePath, data); try { WebRequest request = WebRequest.Create(requestUrl); request.Method = "GET"; StreamReader jsonStream = new StreamReaasp.net編程排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved