JQuery中怎么實(shí)現(xiàn)一個(gè)分頁(yè)程序

這篇文章將為大家詳細(xì)講解有關(guān)JQuery中怎么實(shí)現(xiàn)一個(gè)分頁(yè)程序，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

首先Default.aspx頁(yè)面需要引用的JS文件

Default.aspx頁(yè)面js代碼，如下,每頁(yè)條數(shù)可以自定義，也可以放置配置文件中，queryString函數(shù)是根據(jù)URL參數(shù)名稱，獲取參數(shù)的值

<script type="text/javascript">          var pagesize = 10;          var page = thispage();          $(document).ready(function () {              ajaxList(page);          });           function queryString(pname) {              var query = location.search.substring(1);              var str = "";              params = query.split("&");              if (params.length > 0) {                  for (var n in params) {                      var pairs = params[n].split("=");                      if (pairs[0] == pname) {                          str = pairs[1];                          break;                      }                  }              }              return str;          }           function thispage() {              var r = /^[1-9][0-9]*$/;              if (queryString('page') == '') return 1;              if (r.test(queryString('page')))                  return parseInt(queryString('page'));              else                 return 1;          }           function ajaxList(currentpage) {              if (currentpage != null) page = currentpage;              $.ajax({                  type: "get",//get類型，獲取用QueryString方法，post類型，用Form獲取傳值                  dataType: "json",                  data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(),                  url: "Member_Ajax.aspx",                  error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },                  success: function (d) {                      switch (d.result) {                          case '-1':                              Alert(d.returnval);                              break;                          case '0':                              Alert(d.returnval);                              break;                          case '1':                              $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true });                              $("#ajaxList").processTemplate(d);                              $("#ajaxPageBar").html(d.pagebar);                              break;                      }                  }              });          }    </script>

Default.aspx頁(yè)面Form代碼如下，頁(yè)面數(shù)據(jù)使用JQuery jTemplates綁定數(shù)據(jù)，非常方便，只需設(shè)置JSON格式數(shù)據(jù)，引用JS文件即可

<textarea id="tplList" style="display: none">             <table class="cooltable" width="300px">             <thead>                 <tr>                     <th align="center" scope="col" style="width:30px;"><input onclick="checkAllLine()" id="checkedAll" name="checkedAll" type="checkbox" title="全部選擇/全部不選" /></th>                     <th scope="col" style="width:60px;">ID</th>                     <th width="120px">姓名</th>                     <th scope="col" width="60px">年齡</th>                                      </tr>             </thead>             <tbody>     {#foreach $T.table as record}      <tr>         <td align="center">             <input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' />         </td>         <td align="center">{$T.record.Id}</td>         <td align="left">             {$T.record.Name}          </td>         <td align="left">             {$T.record.Age}          </td>     </tr>     {#/for}  </tbody>             </table>      </textarea>     <div id="ajaxList" style="width:500px;">     </div><br />     <div id="ajaxPageBar" style="width:500px;">     </div>

$T.record.Id 中Id對(duì)應(yīng)的是實(shí)體類Id屬性

上面Javascript方法中用到Member_Ajax.aspx頁(yè)面代碼如下，注意：這里是將數(shù)據(jù)已JSON格式輸出到頁(yè)面，配合JQuery數(shù)據(jù)模板使用，所有Member_Ajax.aspx頁(yè)面，不應(yīng)該包含Html標(biāo)簽，其代碼格式如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Member_Ajax.aspx.cs" Inherits="Nick.Kuang.Web.Member_Ajax" %>

Member_Ajax.aspx cs頁(yè)面代碼

protected void Page_Load(object sender, EventArgs e)          {              Response.Write(GetAll());          }           private string GetAll()          {              List<Student> list = new List<Student>();               for (int i = 0; i < 100; i++)              {                  list.Add(new Student { Id = i, Name = "Name" + i, Age = i });              }                            int pageIndex = GetPage();              int pageSize = StrToInt(QueryString("pagesize"), 10); ;              JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();               string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList());              string response = "{\"result\" :\"1\"," +                  "\"returnval\" :\"操作成功\"," +                  "\"pagebar\" :\"" + PageBar.GetPageBar(3, "js", 2, list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + "\"," +                 "\"" + "totalCountStr" + "\":" + 10 + ",\"" + "table" + "\":" + result +                   "}";              return response;          }           private static int GetPage()          {              int page = StrToInt(QueryString("pageIndex"), 0) < 1 ? 1 : StrToInt(QueryString("pageIndex"), 0);              return page;          }           private static int StrToInt(string value, int defaultValue)          {              if (IsNumeric(value))                  return int.Parse(value);              else                  return defaultValue;          }           /// <summary>         /// 獲取querystring          /// </summary>         /// <param name="s">參數(shù)名</param>         /// <returns>返回值</returns>         private static string QueryString(string s)          {              if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "")              {                  return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString());              }              return string.Empty;          }           /// <summary>         /// 將字符串中的一些標(biāo)簽過(guò)濾          /// </summary>         /// <param name="theString"></param>         /// <returns></returns>         private static string SafetyQueryS(string theString)          {              string[] aryReg = { "'", ";", "\"", "\r", "\n", "<", ">" };              for (int i = 0; i < aryReg.Length; i++)              {                  theStringtheString = theString.Replace(aryReg[i], string.Empty);              }              return theString;          }           private static bool IsNumeric(string value)          {              System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$");              if (value.Length == 0)              {                  return false;              }              return myRegex.IsMatch(value);          }

使用JavaScriptSerializer中的Serialize方法可以將Object類型數(shù)據(jù)轉(zhuǎn)換成JSON格式的數(shù)據(jù)，告別以前拼接成字串的方法

Student實(shí)體類代碼屬性

public class Student      {          public int Id { get; set; }           public string Name { get; set; }           public int Age { get; set; }      }

分頁(yè)中用到的PageBar類代碼，分頁(yè)調(diào)用Default.aspx中ajaxList函數(shù)，實(shí)現(xiàn)無(wú)刷新分頁(yè)

public class PageBar      {          /// <summary>          /// 完整模式：數(shù)字+上下頁(yè)+首末+總記錄信息+指定頁(yè)碼翻轉(zhuǎn)       /// </summary>          /// <param name="stype"></param>          /// <param name="stepNum"></param>          /// <param name="pageRoot"></param>          /// <param name="pageFoot"></param>          /// <param name="countNum"></param>          /// <param name="currentPage"></param>          /// <param name="Http1"></param>          /// <param name="HttpM"></param>          /// <param name="HttpN"></param>          /// <param name="limitPage"></param>          /// <returns></returns>          private static string GetDetailbar(string stype, int stepNum, int pageRoot, int pageFoot, int pageCount, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)          {              StringBuilder sb = new StringBuilder();              sb.Append("<div class='p_btns'>");              //sb.Append("<span class='total_count'>共" + countNum.ToString() + "條，當(dāng)前第" + currentPage.ToString() + "/" + pageCount.ToString() + "頁(yè)&nbsp;&nbsp;&nbsp;</span>");              sb.Append("<span class='total_count'>共" + countNum.ToString() + "條記錄/" + pageCount.ToString() + "頁(yè)&nbsp;&nbsp;</span>");              if (countNum > pageSize)              {                  if (currentPage != 1)//只要不是***頁(yè)                      sb.Append("<a target='_self' href='" + GetPageUrl(currentPage - 1, Http1, HttpM, HttpN, limitPage) + "' title='上一頁(yè)'>&laquo;</a>");                  if (pageRoot > 1)                  {                      sb.Append("<a target='_self' href='" + GetPageUrl(1, Http1, HttpM, HttpN, limitPage) + "'>1..</a>");                  }                  if (stepNum > 0)                  {                      for (int i = pageRoot; i <= pageFoot; i++)                      {                          if (i == currentPage)                              sb.Append("<span class='currentpage'>" + i.ToString() + "</span>");                          else                             sb.Append("<a target='_self' href='" + GetPageUrl(i, Http1, HttpM, HttpN, limitPage) + "'>" + i.ToString() + "</a>");                          if (i == pageCount)                              break;                      }                  }                  if (pageFoot < pageCount)                  {                      sb.Append("<a target='_self' href='" + GetPageUrl(pageCount, Http1, HttpM, HttpN, limitPage) + "'>.." + pageCount + "</a>");                   }                  if (currentPage != pageCount)//只要不是***一頁(yè)                      sb.Append("<a target='_self' href='" + GetPageUrl(currentPage + 1, Http1, HttpM, HttpN, limitPage) + "' title='下一頁(yè)'>&raquo;</a>");                  if (stype == "html")                      sb.Append("<span class='jumppage'>轉(zhuǎn)到第 <input type='text' name='custompage' size='2' onkeyup=\"this.value=this.value.replace(/\\D/g,'')\" onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" onkeydown=\"if(event.keyCode==13) {window.location='" + HttpN + "'.replace('<#page#>',this.value); return false;}\" /> 頁(yè)</span>");              }              sb.Append("</div>");              return sb.ToString();          }           /// <summary>          /// 分頁(yè)導(dǎo)航          /// </summary>          /// <param name="mode">支持1=simple,2=normal,3=full</param>          /// <param name="stype">html/js,只有當(dāng)stype為html且mode為3的時(shí)候顯示任意頁(yè)的轉(zhuǎn)向</param>          /// <param name="stepNum">步數(shù),如果步數(shù)為i，則每頁(yè)的數(shù)字導(dǎo)航就有2i+1</param>          /// <param name="countNum">記錄總數(shù)</param>          /// <param name="pageSize">每頁(yè)記錄數(shù)</param>          /// <param name="currentPage">當(dāng)前頁(yè)碼</param>          /// <param name="Http1">第1頁(yè)的鏈接地址模板，支持js</param>          /// <param name="HttpM">第M頁(yè)的鏈接地址模板，支持js,M不大于limitPage</param>          /// <param name="HttpN">第N頁(yè)的鏈接地址模板，支持js,N大于limitPage</param>          /// <param name="limitPage"></param>          /// <returns></returns>          public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)          {              string pagebar = "";              //if (countNum > pageSize)              //{              int pageCount = countNum % pageSize == 0 ? countNum / pageSize : countNum / pageSize + 1;              currentPage = currentPage > pageCount ? pageCount : currentPage;              currentPage = currentPage < 1 ? 1 : currentPage;              int stepageSize = stepNum * 2;              int pageRoot = 1;              int pageFoot = pageCount;              pageCount = pageCount == 0 ? 1 : pageCount;              if (pageCount - stepageSize < 1)//頁(yè)數(shù)比較少              {                  pageRoot = 1;                  pageFoot = pageCount;              }              else             {                  pageRoot = currentPage - stepNum > 1 ? currentPage - stepNum : 1;                  pageFoot = pageRoot + stepageSize > pageCount ? pageCount : pageRoot + stepageSize;                  pageRoot = pageFoot - stepageSize < pageRoot ? pageFoot - stepageSize : pageRoot;              }                           pagebar = GetDetailbar(stype, stepNum, pageRoot, pageFoot, pageCount, countNum, pageSize, currentPage, Http1, HttpM, HttpN, limitPage);                                 return pagebar;          }           public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string HttpN)          {              return GetPageBar(mode, stype, stepNum, countNum, pageSize, currentPage, HttpN, HttpN, HttpN, 0);          }           public static string GetPageUrl(int chkPage, string Http1, string HttpM, string HttpN, int limitPage)          {              string Http = string.Empty;              if (chkPage == 1)                  Http = Http1;              else                 Http = (chkPage > limitPage || limitPage == 0) ? HttpN : HttpM;              return Http.Replace("<#page#>", chkPage.ToString());          }      }

關(guān)于JQuery中怎么實(shí)現(xiàn)一個(gè)分頁(yè)程序就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。