专栏首页Porschev[钟慰]的专栏Asp.Net无刷新分页( jquery.pagination.js)

Asp.Net无刷新分页( jquery.pagination.js)

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

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

1.插件参数列表

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.实现效果图:

6.源码下载地址一

          下载地址二

示例分页存储过程下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventW...

    Porschev
  • 分享一下cookies操作(增、删、改、查)小经验

    前段时间在做一个 SSO(Single Sign On),用cookies去存Token 网站保存用户信息这类都用的cookies 以前觉得cookies操作无...

    Porschev
  • CodeSmith 创建Ado.Net自定义模版(一)

    CodeSmith Ado.Net模版(一) (本文属于入门级,望高手见谅!哈哈) 开始创建自己的ADO.NET模版 本文使用CodeSmith Profess...

    Porschev
  • 如何科学的修改pod的hostname

    前言:前段时间在某docker&k8s 技术交流群有网友提问,因为pod 内的业务需求,他们需要固定pod 的 hostname ,但是一直没找到很合适的方法,...

    keepyan
  • 保护客户端JavaScript应用最有效的方式

    像Javascript的客户端技术中,存在许多有用的特色。这是造就了它为世界上最受欢迎的编程语言的原因。Javascript特色突出许多优点,其一便是即时编译。...

    疯狂的技术宅
  • 一条为Springboot项目设计的流水线

    demo地址: https://github.com/zeyangli/springboot-helloworld.git

    泽阳
  • Java8函数式编程以及Lambda表达式

    尽管距离Java8发布已经过去7、8年的时间,但时至今日仍然有许多公司、项目停留在Java7甚至更早的版本。即使已经开始使用Java8的项目,大多数程序员也仍然...

    用户1148394
  • PHP7使用openssl解密易班API中的用户数据

      自从PHP版本更新到了7.1以上以后,mcrypt扩展被废弃,使用mcrypt扩展会出现如下图的报错。只能使用openssl来代替。

    雨落凋殇
  • 有理有据!喝酸奶舔瓶盖的真正原因才不是抠

    在很多人眼里,那些喝酸奶不舔盖的,都是大户人家。毕竟盖子上那一层厚厚的酸奶,不舔就是吃亏,舔完了仔细一品……似乎真的要比瓶子里的好喝。

    释然
  • QTableView 添加按钮

    这里说一下怎么在QTableView添加一个按钮 效果是点击button弹出一个对话框。 ? 看一下ButtonDelegate的代码 #ifndef BUTT...

    lpxxn

扫码关注云+社区

领取腾讯云代金券