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.源码下载地址一：http://download.csdn.net/source/2959451

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

示例分页存储过程下载：http://files.cnblogs.com/zhongweiv/PROC_Paging.zip

Asp.Net无刷新分页（ jquery.pagination.js）相关推荐

无刷新分页 jquery.pagination.js
序言这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家. 友情提示下:我有一片博客是用着个js实现的无刷新分页也很好用 ...
Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
简单的ASP.NET无刷新分页
1.新建一个分页存储过程: CREATE procedure [dbo].[P_Pager] (@PageNumber int, @PageSize int) as declare @sql nvar ...
一起谈.NET技术，ASP.NET MVC2.0在Tab页中实现异步无刷新分页
概述很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...
jQuery+Ajax+PHP无刷新分页
代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql) index.html <!DOCTYPE html> <ht ...
php 新闻分页,php jquery 实现新闻标签分类与无刷新分页
php + jquery ui插件 + jquery pager插件实现新闻的标签分类 + 无刷新分页现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了标签分类 + 无刷新分页 ...
基础平台项目之集成Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://git ...
.net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
jq分页不刷新页面_ajax实现无刷新分页效果
基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...

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

Asp.Net无刷新分页（ jquery.pagination.js）相关推荐

最新文章

热门文章