JQuery中怎么实现一个分页程序-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

JQuery中怎么实现一个分页程序

这篇文章将为大家详细讲解有关JQuery中怎么实现一个分页程序，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司是一家专注于网站设计制作、成都网站设计与策划设计,河池网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:河池等地区。河池做网站价格咨询:18980820575

首先Default.aspx页面需要引用的JS文件

Default.aspx页面js代码，如下,每页条数可以自定义，也可以放置配置文件中，queryString函数是根据URL参数名称，获取参数的值

          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;                      }                  }              });          }

Default.aspx页面Form代码如下，页面数据使用JQuery jTemplates绑定数据，非常方便，只需设置JSON格式数据，引用JS文件即可

                                                                                     ID                     姓名                     年龄                                                                     {#foreach $T.table as record}                                              {$T.record.Id}                      {$T.record.Name}                                {$T.record.Age}                    {#/for}

$T.record.Id 中Id对应的是实体类Id属性

上面Javascript方法中用到Member_Ajax.aspx页面代码如下，注意：这里是将数据已JSON格式输出到页面，配合JQuery数据模板使用，所有Member_Ajax.aspx页面，不应该包含Html标签，其代码格式如下

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

Member_Ajax.aspx cs页面代码

protected void Page_Load(object sender, EventArgs e)          {              Response.Write(GetAll());          }           private string GetAll()          {              List list = new List();               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;          }           ///          /// 获取querystring          /// 
         /// 参数名         /// 返回值         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;          }           ///          /// 将字符串中的一些标签过滤          /// 
         ///          ///          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类型数据转换成JSON格式的数据，告别以前拼接成字串的方法

Student实体类代码属性

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

分页中用到的PageBar类代码，分页调用Default.aspx中ajaxList函数，实现无刷新分页

public class PageBar      {          ///           /// 完整模式：数字+上下页+首末+总记录信息+指定页码翻转       /// 
          ///           ///           ///           ///           ///           ///           ///           ///           ///           ///           ///           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("");              //sb.Append("共" + countNum.ToString() + "条，当前第" + currentPage.ToString() + "/" + pageCount.ToString() + "页   ");              sb.Append("共" + countNum.ToString() + "条记录/" + pageCount.ToString() + "页  ");              if (countNum > pageSize)              {                  if (currentPage != 1)//只要不是***页                      sb.Append("«");                  if (pageRoot > 1)                  {                      sb.Append("1..");                  }                  if (stepNum > 0)                  {                      for (int i = pageRoot; i <= pageFoot; i++)                      {                          if (i == currentPage)                              sb.Append("" + i.ToString() + "");                          else                             sb.Append("" + i.ToString() + "");                          if (i == pageCount)                              break;                      }                  }                  if (pageFoot < pageCount)                  {                      sb.Append(".." + pageCount + "");                   }                  if (currentPage != pageCount)//只要不是***一页                      sb.Append("»");                  if (stype == "html")                      sb.Append("转到第 ',this.value); return false;}\" /> 页");              }              sb.Append("

"); return sb.ToString(); } ///

/// 分页导航 ///

/// 支持1=simple,2=normal,3=full /// html/js,只有当stype为html且mode为3的时候显示任意页的转向 /// 步数,如果步数为i，则每页的数字导航就有2i+1 /// 记录总数 /// 每页记录数 /// 当前页码 /// 第1页的链接地址模板，支持js /// 第M页的链接地址模板，支持js,M不大于limitPage /// 第N页的链接地址模板，支持js,N大于limitPage /// /// 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)//页数比较少 { 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()); } }

关于JQuery中怎么实现一个分页程序就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前名称：JQuery中怎么实现一个分页程序
链接URL：http://lswzjz.com/article/jispig.html

新闻中心

其他资讯