Asp.Net无刷新分页（ jquery.pagination.js）

谁借莪１个温暖的怀抱￠ 2021-06-26 16:06 482阅读 0赞

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

**友情提示：本示例`Handler`中采用`StringBuilder`的`append`方法追加`HTML`，小数据量可以，但是大数据或是布局常变，建议返回`JSON`格式的数据，性能和灵活性更好！**

## 1.插件参数列表 ##

![在这里插入图片描述][20190725223424503.png]

## 2.页面内容： ##

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Porschev----无刷新翻页</title>    
        <script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script src="Script/jquery.pagination.js" type="text/javascript"></script>    
        <script src="Script/tablecloth.js" type="text/javascript"></script>   
        <link href="Style/tablecloth.css" rel="stylesheet" type="text/css"/>
        <link href="Style/pagination.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript"> var pageIndex =0; //页面索引初始值 var pageSize =10; //每页显示条数初始化，修改显示条数，修改这里即可 $(function() { InitTable(0); //Load事件，初始化表格数据，页面索引为0（第一页） //分页，PageCount是总条目数，这是必选参数，其它参数都是可选 $("#Pagination").pagination(<%=pageCount %>, { callback: PageCallback, prev_text: '上一页', //上一页按钮里text next_text: '下一页', //下一页按钮里text items_per_page: pageSize, //显示条数 num_display_entries: 6, //连续分页主体部分分页条目数 current_page: pageIndex, //当前页索引 num_edge_entries: 2//两侧首尾分页条目数 }); //翻页调用 function PageCallback(index, jq) { InitTable(index); } //请求数据 function InitTable(pageIndex) { $.ajax({ type: "POST", dataType: "text", url: 'Handler/PagerHandler.ashx', //提交到一般处理程序请求数据 data: "pageIndex="+ (pageIndex +1) +"&pageSize="+ pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数) success: function(data) { $("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变） $("#Result").append(data); //将返回的数据追加到表格 } }); } }); </script>
    </head>
    <body>
    <div align="center">
      <h1>Posrchev----无刷新分页</h1>
    </div>
    <div id="container">  
       <table id="Result" cellspacing="0" cellpadding="0">          
                <tr>
                    <th>编号</th>
                    <th>名称</th>                
                </tr>                                                                                                
       </table>
        <div id="Pagination"></div>
    </div>
    </body>
    </html>

## 3.页面`.cs`文件内容： ##

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class _Default : System.Web.UI.Page 
    { 
        public string pageCount = string.Empty; //总条目数
        protected void Page_Load(object sender, EventArgs e)
        { 
            if (!IsPostBack)
            { 
               pageCount = new PagerTestBLL.PersonManager().GetPersonCount().ToString();
            }
        }
    }

## 4.`Handler`中的内容： ##

<%@ WebHandler Language="C#" Class="PagerHandler" %>
    using System;
    using System.Web;
    using System.Collections.Generic;
    using System.Text;
    public class PagerHandler : IHttpHandler { 
        
        public void ProcessRequest (HttpContext context) { 
            context.Response.ContentType = "text/plain";
            string str = string.Empty;
            
            //具体的页面数
            int pageIndex;
            int.TryParse(context.Request["pageIndex"], out pageIndex);
            //页面显示条数
            int size = Convert.ToInt32(context.Request["pageSize"]);
            
            if (pageIndex == 0)
            { 
                pageIndex = 1;
            }
            
            int count;
            List<PagerTestModels.Person> list = new PagerTestBLL.PersonManager().GetAllPerson(size, pageIndex, "", out count);
            
            StringBuilder sb = new StringBuilder();
            foreach (PagerTestModels.Person p in list)
            {             
                sb.Append("<tr><td>");
                sb.Append(p.Id.ToString());
                sb.Append("</td><td>");
                sb.Append(p.Name);
                sb.Append("</td></tr>");
            }
            str = sb.ToString();
            context.Response.Write(str);     
        }
     
        public bool IsReusable { 
            get { 
                return false;
            }
        }
    }

## 5.实现效果图： ##

![在这里插入图片描述][20190725225332452.png]  
6.源码下载地址一：[http://download.csdn.net/source/2959451][http_download.csdn.net_source_2959451]

下载地址二：[http://files.cnblogs.com/zhongweiv/Pager.rar][http_files.cnblogs.com_zhongweiv_Pager.rar]

示例分页存储过程下载：[http://files.cnblogs.com/zhongweiv/PROC\_Paging.zip][http_files.cnblogs.com_zhongweiv_PROC_Paging.zip]

[20190725223424503.png]: /images/20210626/95b3cd6fe81a4990bbc8da5f5220caed.png
[20190725225332452.png]: /images/20210626/b2c1eebc268b41ecabd25b38dfa87563.png
[http_download.csdn.net_source_2959451]: http://download.csdn.net/source/2959451
[http_files.cnblogs.com_zhongweiv_Pager.rar]: http://files.cnblogs.com/zhongweiv/Pager.rar
[http_files.cnblogs.com_zhongweiv_PROC_Paging.zip]: http://files.cnblogs.com/zhongweiv/PROC_Paging.zip