jquery分页例子

先看效果图：

实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：

一、数据库表结构：很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes

二、前台页面代码：

[javascript] view plaincopyprint?
  1. <head runat="server">  
  2.     <title>JQuery无刷新分页</title>  
  3.     <link href="Styles/common.css" rel="stylesheet" type="text/css" />  
  4.     <link href="Styles/paging.css" rel="stylesheet" type="text/css" />  
  5.     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
  6.     <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>  
  7.     <script type="text/javascript">      
  8.     var pageIndex = 0;  
  9.     var pageSize = 3;  
  10.      
  11.     $(function() {         
  12.         InitTable(0);                
  13.                                  
  14.         $("#Pagination").pagination(<%=pageCount %>, {  
  15.             callback: PageCallback,  
  16.             prev_text: '上一页',  
  17.             next_text: '下一页',  
  18.             items_per_page: pageSize,  
  19.             num_display_entries: 6,//连续分页主体部分分页条目数  
  20.             current_page: pageIndex,//当前页索引  
  21.             num_edge_entries: 2//两侧首尾分页条目数  
  22.         });  
  23.               
  24.         //翻页调用  
  25.         function PageCallback(index, jq) {             
  26.             InitTable(index);  
  27.         }  
  28.   
  29.         //请求数据  
  30.         function InitTable(pageIndex) {                                  
  31.             $.ajax({   
  32.                 type: "POST",  
  33.                 dataType: "text",  
  34.                 url: 'Ajax/PagerHandler.ashx',  
  35.                 data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,  
  36.                 success: function(data) {                                   
  37.                     $("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）  
  38.                     $("#Result").append(data);//将返回的数据追加到表格  
  39.                 }  
  40.             });              
  41.         }  
  42.     });  
  43.     </script>  
  44. </head>  
[html] view plaincopyprint?
  1. <form id="form1" runat="server">  
  2.     <center>  
  3.         <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;  
  4.             border: solid 1px #85A8BE;60%">  
  5.             <tr>  
  6.                 <th style=" 10%">  
  7.                     ID  
  8.                 </th>  
  9.                 <th style=" 60%">  
  10.                     标题  
  11.                 </th>  
  12.                 <th style=" 20%">  
  13.                     更新时间  
  14.                 </th>  
  15.                 <th style=" 10%">  
  16.                     点击量  
  17.                 </th>  
  18.             </tr>  
  19.         </table>  
  20.         <div id="Pagination" class="paging">  
  21.         </div>  
  22.     </center>  
  23.     </form>  

三、页面后台文件

这里主要是获取记录总数：

public string pageCount = string.Empty;//总条目数

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }

四、最主要的是ajax处理程序：PagerHandler.ashx

[csharp] view plaincopyprint?
    1. public class PagerHandler : IHttpHandler  
    2.    {  
    3.        public void ProcessRequest(HttpContext context)  
    4.        {  
    5.            context.Response.ContentType = "text/plain";  
    6.            string str = string.Empty;  
    7.            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);  
    8.            int size = Convert.ToInt32(context.Request["pageSize"]);  
    9.            if (pageIndex == 0)  
    10.            {  
    11.                pageIndex = 1;  
    12.            }  
    13.            int count = 0;  
    14.   
    15.            News n = new News();  
    16.            List<News> list = n.GetNewsList(pageIndex, size, ref count);  
    17.            StringBuilder sb = new StringBuilder();  
    18.            foreach (News p in list)  
    19.            {  
    20.                sb.Append("<tr><td>");  
    21.                sb.Append(p.News_id);  
    22.                sb.Append("</td><td>");  
    23.                sb.Append("<a href='#'>"+p.News_title+"</a>");  
    24.                sb.Append("</td><td>");  
    25.                sb.Append(p.News_time);  
    26.                sb.Append("</td><td>");  
    27.                sb.Append(p.News_readtimes);  
    28.                sb.Append("</td></tr>");  
    29.            }  
    30.            str = sb.ToString();  
    31.            context.Response.Write(str);  
    32.        }  
    33.   
    34.        public bool IsReusable  
    35.        {  
    36.            get  
    37.            {  
    38.                return false;  
    39.            }  
    40.        }  
    41.    } 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sdya/p/4585638.html