zoukankan      html  css  js  c++  java

  • 无刷新分页 jquery.pagination.js

     无刷新分页 jquery.pagination.js

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果

    1.插件参数列表

    参数列表

      http://www.dtan.so

    2.页面内容：

    [c-sharp] view plaincopyprint?
     
    1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4. <head runat="server">  
    5.     <title>Porschev----无刷新翻页</title>      
    6.     <mce:script src="Script/jquery-1.4.1.min.js" mce_src="Script/jquery-1.4.1.min.js" type="text/javascript"></mce:script>  
    7.     <mce:script src="Script/jquery.pagination.js" mce_src="Script/jquery.pagination.js" type="text/javascript"></mce:script>      
    8.     <mce:script src="Script/tablecloth.js" mce_src="Script/tablecloth.js" type="text/javascript"></mce:script>     
    9.     <link href="Style/tablecloth.css" mce_href="Style/tablecloth.css" rel="stylesheet" type="text/css" />  
    10.     <link href="Style/pagination.css" mce_href="Style/pagination.css" rel="stylesheet" type="text/css" />  
    11.     <mce:script type="text/javascript"><!--  
    12.       
    13.     var pageIndex = 0;     //页面索引初始值  
    14.     var pageSize = 10;     //每页显示条数初始化，修改显示条数，修改这里即可  
    15.      
    16.      
    17.     $(function() {         
    18.         InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）  
    19.                                                               
    20.         //分页，PageCount是总条目数，这是必选参数，其它参数都是可选  
    21.         $("#Pagination").pagination(<%=pageCount %>, {  
    22.             callback: PageCallback,  
    23.             prev_text: '上一页',       //上一页按钮里text  
    24.             next_text: '下一页',       //下一页按钮里text  
    25.             items_per_page: pageSize,  //显示条数  
    26.             num_display_entries: 6,    //连续分页主体部分分页条目数  
    27.             current_page: pageIndex,   //当前页索引  
    28.             num_edge_entries: 2        //两侧首尾分页条目数  
    29.         });  
    30.               
    31.         //翻页调用  
    32.         function PageCallback(index, jq) {             
    33.             InitTable(index);  
    34.         }  
    35.         //请求数据  
    36.         function InitTable(pageIndex) {                                  
    37.             $.ajax({   
    38.                 type: "POST",  
    39.                 dataType: "text",  
    40.                 url: 'Handler/PagerHandler.ashx',      //提交到一般处理程序请求数据  
    41.                 data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                  
    42.                 success: function(data) {                                   
    43.                     $("#Result tr:gt(0)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）  
    44.                     $("#Result").append(data);             //将返回的数据追加到表格  
    45.                 }  
    46.             });              
    47.         }  
    48.           
    49.     });  
    50.        
    51. // --></mce:script>  
    52. </head>  
    53. <body>  
    54. <div align="center">  
    55.   <h1>Posrchev----无刷新分页</h1>  
    56. </div>  
    57. <div id="container">    
    58.    <table id="Result" cellspacing="0" cellpadding="0">            
    59.             <tr>  
    60.                 <th>编号</th>  
    61.                 <th>名称</th>               
    62.             </tr>                                                                                               
    63.    </table>  
    64.     <div id="Pagination"></div>  
    65. </div>  
    66. </body>  
    67. </html>   

    3.页面后台内容：

    [c-sharp] view plaincopyprint?
     
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.UI;  
    6. using System.Web.UI.WebControls;  
    7. public partial class _Default : System.Web.UI.Page   
    8. {  
    9.     public string pageCount = string.Empty; //总条目数  
    10.     protected void Page_Load(object sender, EventArgs e)  
    11.     {  
    12.         if (!IsPostBack)  
    13.         {  
    14.            pageCount = new PagerTestBLL.PersonManager().GetPersonCount().ToString();  
    15.         }  
    16.     }  
    17. }  

    4.Handler中的内容：

    [c-sharp] view plaincopyprint?
     
    1. <%@ WebHandler Language="C#" Class="PagerHandler" %>  
    2. using System;  
    3. using System.Web;  
    4. using System.Collections.Generic;  
    5. using System.Text;  
    6. public class PagerHandler : IHttpHandler {  
    7.       
    8.     public void ProcessRequest (HttpContext context) {  
    9.         context.Response.ContentType = "text/plain";  
    10.         string str = string.Empty;  
    11.           
    12.         //具体的页面数  
    13.         int pageIndex;  
    14.         int.TryParse(context.Request["pageIndex"], out pageIndex);  
    15.         //页面显示条数  
    16.         int size = Convert.ToInt32(context.Request["pageSize"]);  
    17.           
    18.         if (pageIndex == 0)  
    19.         {  
    20.             pageIndex = 1;  
    21.         }  
    22.           
    23.         int count;  
    24.         List<PagerTestModels.Person> list = new PagerTestBLL.PersonManager().GetAllPerson(size, pageIndex, "", out count);  
    25.           
    26.         StringBuilder sb = new StringBuilder();  
    27.         foreach (PagerTestModels.Person p in list)  
    28.         {              
    29.             sb.Append("<tr><td>");  
    30.             sb.Append(p.Id.ToString());  
    31.             sb.Append("</td><td>");  
    32.             sb.Append(p.Name);  
    33.             sb.Append("</td></tr>");  
    34.         }  
    35.         str = sb.ToString();  
    36.         context.Response.Write(str);       
    37.     }  
    38.    
    39.     public bool IsReusable {  
    40.         get {  
    41.             return false;  
    42.         }  
    43.     }  
    44. }  

    5.实现效果图：

    实现效果图

    6.源码下载地址

    http://download.csdn.net/source/2959451

    本文转自：http://blog.csdn.net/porschev/article/details/6114997
  • 相关阅读:
    rabbitmq
    mysql
    redis
    vue整理
    crawlspider和中间件
    日志等级与请求传参
    Scrapy框架初级篇
    验证码操作
    图片懒加载、selenium&phantomjs
    《信息安全系统设计基础》 第二周学习总结
  • 原文地址：https://www.cnblogs.com/Rozdy/p/4142321.html
Copyright © 2011-2022 走看看