JQuery实现分页程序代码

做Web开发的程序员，分页时在所难免的，微软GridView、AspPager等设置分页数据可以自动分页，但是这里浏览器会闪动，用户体验不是很友好，在此我整理了JQuery实现分页，并且使用。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的丹寨网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

JQuery绑定模板，显示数据

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

JQuery采用 1.4.1.1 下载地址：http://pan.baidu.com/share/link?shareid=3024434948&uk=2920032010

JQuery数据显示模板JS 下载地址：http://pan.baidu.com/share/link?shareid=3030793948&uk=2920032010

分页按钮样式 下载地址：http://pan.baidu.com/share/link?shareid=3146737028&uk=2920032010

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.         var pagesize = 10; 
    3. 
  
  
  
  3.         var page = thispage(); 
    4. 
  
  
  
  4.         $(document).ready(function () { 
    5. 
  
  
  
  5.             ajaxList(page); 
    6. 
  
  
  
  6.         }); 
    7. 
  
  
  
  7. 
  
  
  
  8.         function queryString(pname) { 
    9. 
  
  
  
  9.             var query = location.search.substring(1); 
    10. 
  
  
  
  10.             var str = ""; 
    11. 
  
  
  
  11.             params = query.split("&"); 
    12. 
  
  
  
  12.             if (params.length > 0) { 
    13. 
  
  
  
  13.                 for (var n in params) { 
    14. 
  
  
  
  14.                     var pairs = params[n].split("="); 
    15. 
  
  
  
  15.                     if (pairs[0] == pname) { 
    16. 
  
  
  
  16.                         str = pairs[1]; 
    17. 
  
  
  
  17.                         break; 
    18. 
  
  
  
  18.                     } 
    19. 
  
  
  
  19.                 } 
    20. 
  
  
  
  20.             } 
    21. 
  
  
  
  21.             return str; 
    22. 
  
  
  
  22.         } 
    23. 
  
  
  
  23. 
  
  
  
  24.         function thispage() { 
    25. 
  
  
  
  25.             var r = /^[1-9][0-9]*$/; 
    26. 
  
  
  
  26.             if (queryString('page') == '') return 1; 
    27. 
  
  
  
  27.             if (r.test(queryString('page'))) 
    28. 
  
  
  
  28.                 return parseInt(queryString('page')); 
    29. 
  
  
  
  29.             else
    30. 
  
  
  
  30.                 return 1; 
    31. 
  
  
  
  31.         } 
    32. 
  
  
  
  32. 
  
  
  
  33.         function ajaxList(currentpage) { 
    34. 
  
  
  
  34.             if (currentpage != null) page = currentpage; 
    35. 
  
  
  
  35.             $.ajax({ 
    36. 
  
  
  
  36.                 type: "get",//get类型，获取用QueryString方法，post类型，用Form获取传值 
    37. 
  
  
  
  37.                 dataType: "json", 
    38. 
  
  
  
  38.                 data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(), 
    39. 
  
  
  
  39.                 url: "Member_Ajax.aspx", 
    40. 
  
  
  
  40.                 error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); }, 
    41. 
  
  
  
  41.                 success: function (d) { 
    42. 
  
  
  
  42.                     switch (d.result) { 
    43. 
  
  
  
  43.                         case '-1': 
    44. 
  
  
  
  44.                             Alert(d.returnval); 
    45. 
  
  
  
  45.                             break; 
    46. 
  
  
  
  46.                         case '0': 
    47. 
  
  
  
  47.                             Alert(d.returnval); 
    48. 
  
  
  
  48.                             break; 
    49. 
  
  
  
  49.                         case '1': 
    50. 
  
  
  
  50.                             $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true }); 
    51. 
  
  
  
  51.                             $("#ajaxList").processTemplate(d); 
    52. 
  
  
  
  52.                             $("#ajaxPageBar").html(d.pagebar); 
    53. 
  
  
  
  53.                             break; 
    54. 
  
  
  
  54.                     } 
    55. 
  
  
  
  55.                 } 
    56. 
  
  
  
  56.             }); 
    57. 
  
  
  
  57.         } 
    58. 
  
  
  
  58. 
  
  
  
  59.  
    60.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.             
    3. 
  
  
  
  3.             
    4. 
  
  
  
  4.                 
    5. 
  
  
  
  5.                     
    6. 
  
  
  
  6.                     ID
    7. 
  
  
  
  7.                     姓名
    8. 
  
  
  
  8.                     年龄
    9. 
  
  
  
  9.                      
    10. 
  
  
  
  10.                
    11. 
  
  
  
  11.             
    12. 
  
  
  
  12.             
    13. 
  
  
  
  13.     {#foreach $T.table as record} 
    14. 
  
  
  
  14.     
    15. 
  
  
  
  15.         
    16. 
  
  
  
  16.             
    17. 
  
  
  
  17.         
    18. 
  
  
  
  18.         {$T.record.Id}
    19. 
  
  
  
  19.         
    20. 
  
  
  
  20.             {$T.record.Name} 
    21. 
  
  
  
  21.         
    22. 
  
  
  
  22.         
    23. 
  
  
  
  23.             {$T.record.Age} 
    24. 
  
  
  
  24.         
    25. 
  
  
  
  25.     
    26. 
  
  
  
  26.     {#/for} 
    27. 
  
  
  
  27. 
  
  
  
  28.             
    29. 
  
  
  
  29.      
    30. 
  
  
  
  30.     
    31. 
  
  
  
  31.     
  •     
  •     

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

    #p#

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

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

    Member_Ajax.aspx cs页面代码

     
 
 
      
  
  
  
    1. protected void Page_Load(object sender, EventArgs e) 
      2. 
  
  
  
    2.         { 
      3. 
  
  
  
    3.             Response.Write(GetAll()); 
      4. 
  
  
  
    4.         } 
      5. 
  
  
  
    5. 
  
  
  
    6.         private string GetAll() 
      7. 
  
  
  
    7.         { 
      8. 
  
  
  
    8.             List list = new List(); 
      9. 
  
  
  
    9. 
  
  
  
    10.             for (int i = 0; i < 100; i++) 
      11. 
  
  
  
    11.             { 
      12. 
  
  
  
    12.                 list.Add(new Student { Id = i, Name = "Name" + i, Age = i }); 
      13. 
  
  
  
    13.             } 
      14. 
  
  
  
    14.              
      15. 
  
  
  
    15.             int pageIndex = GetPage(); 
      16. 
  
  
  
    16.             int pageSize = StrToInt(QueryString("pagesize"), 10); ; 
      17. 
  
  
  
    17.             JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer(); 
      18. 
  
  
  
    18. 
  
  
  
    19.             string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList()); 
      20. 
  
  
  
    20.             string response = "{\"result\" :\"1\"," + 
      21. 
  
  
  
    21.                 "\"returnval\" :\"操作成功\"," + 
      22. 
  
  
  
    22.                 "\"pagebar\" :\"" + PageBar.GetPageBar(3, "js", 2, list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + "\"," + 
      23. 
  
  
  
    23.                "\"" + "totalCountStr" + "\":" + 10 + ",\"" + "table" + "\":" + result +  
      24. 
  
  
  
    24.                 "}"; 
      25. 
  
  
  
    25.             return response; 
      26. 
  
  
  
    26.         } 
      27. 
  
  
  
    27. 
  
  
  
    28.         private static int GetPage() 
      29. 
  
  
  
    29.         { 
      30. 
  
  
  
    30.             int page = StrToInt(QueryString("pageIndex"), 0) < 1 ? 1 : StrToInt(QueryString("pageIndex"), 0); 
      31. 
  
  
  
    31.             return page; 
      32. 
  
  
  
    32.         } 
      33. 
  
  
  
    33. 
  
  
  
    34.         private static int StrToInt(string value, int defaultValue) 
      35. 
  
  
  
    35.         { 
      36. 
  
  
  
    36.             if (IsNumeric(value)) 
      37. 
  
  
  
    37.                 return int.Parse(value); 
      38. 
  
  
  
    38.             else 
      39. 
  
  
  
    39.                 return defaultValue; 
      40. 
  
  
  
    40.         } 
      41. 
  
  
  
    41. 
  
  
  
    42.         /// 
      43. 
  
  
  
    43.         /// 获取querystring 
      44. 
  
  
  
    44.         /// 
      45. 
  
  
  
    45.         /// 参数名
      46. 
  
  
  
    46.         /// 返回值
      47. 
  
  
  
    47.         private static string QueryString(string s) 
      48. 
  
  
  
    48.         { 
      49. 
  
  
  
    49.             if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "") 
      50. 
  
  
  
    50.             { 
      51. 
  
  
  
    51.                 return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString()); 
      52. 
  
  
  
    52.             } 
      53. 
  
  
  
    53.             return string.Empty; 
      54. 
  
  
  
    54.         } 
      55. 
  
  
  
    55. 
  
  
  
    56.         /// 
      57. 
  
  
  
    57.         /// 将字符串中的一些标签过滤 
      58. 
  
  
  
    58.         /// 
      59. 
  
  
  
    59.         /// 
      60. 
  
  
  
    60.         /// 
      61. 
  
  
  
    61.         private static string SafetyQueryS(string theString) 
      62. 
  
  
  
    62.         { 
      63. 
  
  
  
    63.             string[] aryReg = { "'", ";", "\"", "\r", "\n", "<", ">" }; 
      64. 
  
  
  
    64.             for (int i = 0; i < aryReg.Length; i++) 
      65. 
  
  
  
    65.             { 
      66. 
  
  
  
    66.                 theStringtheString = theString.Replace(aryReg[i], string.Empty); 
      67. 
  
  
  
    67.             } 
      68. 
  
  
  
    68.             return theString; 
      69. 
  
  
  
    69.         } 
      70. 
  
  
  
    70. 
  
  
  
    71.         private static bool IsNumeric(string value) 
      72. 
  
  
  
    72.         { 
      73. 
  
  
  
    73.             System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$"); 
      74. 
  
  
  
    74.             if (value.Length == 0) 
      75. 
  
  
  
    75.             { 
      76. 
  
  
  
    76.                 return false; 
      77. 
  
  
  
    77.             } 
      78. 
  
  
  
    78.             return myRegex.IsMatch(value); 
      79. 
  
  
  
    79.         }
      80.

    使用JavaScriptSerializer中的Serialize方法可以将Object类型数据转换成JSON格式的数据，告别以前拼接成字串的方法

    Student实体类代码属性

     
 
 
      
  
  
  
    1. public class Student 
      2. 
  
  
  
    2.     { 
      3. 
  
  
  
    3.         public int Id { get; set; } 
      4. 
  
  
  
    4. 
  
  
  
    5.         public string Name { get; set; } 
      6. 
  
  
  
    6. 
  
  
  
    7.         public int Age { get; set; } 
      8. 
  
  
  
    8.     }
      9.

    #p#

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

     
 
 
      
  
  
  
    1. public class PageBar 
      2. 
  
  
  
    2.     { 
      3. 
  
  
  
    3.         ///  
      4. 
  
  
  
    4.         /// 完整模式：数字+上下页+首末+总记录信息+指定页码翻转 
      5. 
  
  
  
    5.      ///  
      6. 
  
  
  
    6.         ///  
      7. 
  
  
  
    7.         ///  
      8. 
  
  
  
    8.         ///  
      9. 
  
  
  
    9.         ///  
      10. 
  
  
  
    10.         ///  
      11. 
  
  
  
    11.         ///  
      12. 
  
  
  
    12.         ///  
      13. 
  
  
  
    13.         ///  
      14. 
  
  
  
    14.         ///  
      15. 
  
  
  
    15.         ///  
      16. 
  
  
  
    16.         ///  
      17. 
  
  
  
    17.         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) 
      18. 
  
  
  
    18.         { 
      19. 
  
  
  
    19.             StringBuilder sb = new StringBuilder(); 
      20. 
  
  
  
    20.             sb.Append(""); 
      21. 
  
  
  
    21.             //sb.Append("共" + countNum.ToString() + "条，当前第" + currentPage.ToString() + "/" + pageCount.ToString() + "页   "); 
      22. 
  
  
  
    22.             sb.Append("共" + countNum.ToString() + "条记录/" + pageCount.ToString() + "页  "); 
      23. 
  
  
  
    23.             if (countNum > pageSize) 
      24. 
  
  
  
    24.             { 
      25. 
  
  
  
    25.                 if (currentPage != 1)//只要不是***页 
      26. 
  
  
  
    26.                     sb.Append("«"); 
      27. 
  
  
  
    27.                 if (pageRoot > 1) 
      28. 
  
  
  
    28.                 { 
      29. 
  
  
  
    29.                     sb.Append("1.."); 
      30. 
  
  
  
    30.                 } 
      31. 
  
  
  
    31.                 if (stepNum > 0) 
      32. 
  
  
  
    32.                 { 
      33. 
  
  
  
    33.                     for (int i = pageRoot; i <= pageFoot; i++) 
      34. 
  
  
  
    34.                     { 
      35. 
  
  
  
    35.                         if (i == currentPage) 
      36. 
  
  
  
    36.                             sb.Append("" + i.ToString() + ""); 
      37. 
  
  
  
    37.                         else
      38. 
  
  
  
    38.                             sb.Append("" + i.ToString() + ""); 
      39. 
  
  
  
    39.                         if (i == pageCount) 
      40. 
  
  
  
    40.                             break; 
      41. 
  
  
  
    41.                     } 
      42. 
  
  
  
    42.                 } 
      43. 
  
  
  
    43.                 if (pageFoot < pageCount) 
      44. 
  
  
  
    44.                 { 
      45. 
  
  
  
    45.                     sb.Append(".." + pageCount + ""); 
      46. 
  
  
  
    46. 
  
  
  
    47.                 } 
      48. 
  
  
  
    48.                 if (currentPage != pageCount)//只要不是***一页 
      49. 
  
  
  
    49.                     sb.Append("»"); 
      50. 
  
  
  
    50.                 if (stype == "html") 
      51. 
  
  
  
    51.                     sb.Append("转到第 ',this.value); return false;}\" /> 页"); 
      52. 
  
  
  
    52.             } 
      53. 
  
  
  
    53.             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实现分页程序代码
    文章起源：http://www.shufengxianlan.com/qtweb/news45/53695.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站制作知识

    分类信息网站

    邛崃网站建设　　 　恒温恒湿空调机组　　 　成都广告制作　　 　成都网站推广　　 　成都SEO公司　　 　成都小程序开发　　 　彭州做网站　　 　防护网厂　　 　响应式网站设计　　 　托管服务器　　 　一元广告　　 　成都网站设计　　 　网站建设策划方案　　 　外贸网站建设方案　　 　手机网站　　 　服务器托管　　 　教育建设方案　　 　香港虚拟主机腾讯云　　 　网站排名　　 　营销型网站建设