• 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.    } 
  • 相关阅读:
    0.1+0.2==0.3?
    Tomcat 初探（三）多项目部署
    Tomcat 初探（二） server.xml 配置
    Tomcat 初探（一） 简介
    如何使用 Idea 远程调试 Java 代码
    js-将时间戳转为正常的日期
    VUE-基本的写法
    HTML-列表无缝滚动效果2（显示一个暂停3秒，滚走显示下一个）
    JS-判断用户使用的终端是安卓还是IOS
    JS-在本页面监听是否用户是点击了返回进入的（IOS返回页面时，页面未初始化）
  • 原文地址：https://www.cnblogs.com/sdya/p/4585638.html
Copyright © 2020-2023  润新知