继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

分页插件jquery.pagination.js

远看寒山石径斜
关注TA
已关注
手记 268
粉丝 25
获赞 149

采用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 Proce***equest (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.实现效果图:

实现效果图

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP