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

1.插件参数列表

http://www.dtan.so

2.页面内容：

  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. var pageIndex = 0;     //页面索引初始值
  13. var pageSize = 10;     //每页显示条数初始化，修改显示条数，修改这里即可
  14. $(function() {
  15. InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）
  16. //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
  17. $("#Pagination").pagination(<%=pageCount %>, {
  18. callback: PageCallback,
  19. prev_text: '上一页',       //上一页按钮里text
  20. next_text: '下一页',       //下一页按钮里text
  21. items_per_page: pageSize,  //显示条数
  22. num_display_entries: 6,    //连续分页主体部分分页条目数
  23. current_page: pageIndex,   //当前页索引
  24. num_edge_entries: 2        //两侧首尾分页条目数
  25. });
  26. //翻页调用
  27. function PageCallback(index, jq) {
  28. InitTable(index);
  29. }
  30. //请求数据
  31. function InitTable(pageIndex) {
  32. $.ajax({
  33. type: "POST",
  34. dataType: "text",
  35. url: 'Handler/PagerHandler.ashx',      //提交到一般处理程序请求数据
  36. data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
  37. success: function(data) {
  38. $("#Result tr:gt(0)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
  39. $("#Result").append(data);             //将返回的数据追加到表格
  40. }
  41. });
  42. }
  43. });
  44. // --></mce:script>
  45. </head>
  46. <body>
  47. <div align="center">
  48. <h1>Posrchev----无刷新分页</h1>
  49. </div>
  50. <div id="container">
  51. <table id="Result" cellspacing="0" cellpadding="0">
  52. <tr>
  53. <th>编号</th>
  54. <th>名称</th>
  55. </tr>
  56. </table>
  57. <div id="Pagination"></div>
  58. </div>
  59. </body>
  60. </html>

3.页面后台内容：

  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中的内容：

  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. public void ProcessRequest (HttpContext context) {
  8. context.Response.ContentType = "text/plain";
  9. string str = string.Empty;
  10. //具体的页面数
  11. int pageIndex;
  12. int.TryParse(context.Request["pageIndex"], out pageIndex);
  13. //页面显示条数
  14. int size = Convert.ToInt32(context.Request["pageSize"]);
  15. if (pageIndex == 0)
  16. {
  17. pageIndex = 1;
  18. }
  19. int count;
  20. List<PagerTestModels.Person> list = new PagerTestBLL.PersonManager().GetAllPerson(size, pageIndex, "", out count);
  21. StringBuilder sb = new StringBuilder();
  22. foreach (PagerTestModels.Person p in list)
  23. {
  24. sb.Append("<tr><td>");
  25. sb.Append(p.Id.ToString());
  26. sb.Append("</td><td>");
  27. sb.Append(p.Name);
  28. sb.Append("</td></tr>");
  29. }
  30. str = sb.ToString();
  31. context.Response.Write(str);
  32. }
  33. public bool IsReusable {
  34. get {
  35. return false;
  36. }
  37. }
  38. }

5.实现效果图：

6.源码下载地址

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

本文转自：http://blog.csdn.net/porschev/article/details/6114997

无刷新分页 jquery.pagination.js的更多相关文章

  1. [转]jquery.pagination.js分页

    本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...

  2. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

  3. ajax分页2：jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. jquery+jquery.pagination+php+ajax 无刷新分页

    <!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...

  5. jquery.pagination +JSON 动态无刷新分页

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...

  6. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...

  7. ajax分页实现，jquery.pagination.js

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...

  8. js jquery.pagination.js分页

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...

  9. jquery ajax php+mysql 无刷新分页 详细实例

    最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...

随机推荐

  1. 使用Eclipse开发，Java Compiler中Annotation Processin不出现的解决方案

    第一步:在Eclipse菜单栏中点击Help,在点击inatall New Software 第二步:在Work with中找到 Juno - http://download.eclipse.org/ ...

  2. apache ab的安装步骤

    1:到apache官方网站http://httpd.apache.org/download.cgi#apache24下载最新版本的apache,然后解压,执行如下命令: ./configure –pr ...

  3. Python-Day4 Python基础进阶之生成器/迭代器/装饰器/Json & pickle 数据序列化

    一.生成器 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面 ...

  4. Posix 信号量

    作用 信号量的值为0或正整数,就像红灯与绿灯,用于指示当前是否可以接受任务. 信号量对进程和线程都适用. gcc编译时需加-lpthread 基本函数 信号量的相关函数与标准文件函数非常相似,可以理解 ...

  5. [ERROR] Failed to open log

    版本:5.5.14 性能测试部-测试环境数据库 1.在性能测试过程中大量的日志,测试人员直接使用 rm -rf 删除所有 2.重启数据库时,出现报错,导致数据库无法启动,查看报错日志,报错信息如下: ...

  6. 从零开始学ios开发（十六）：Navigation Controllers and Table Views（下）

    终于进行到下了,这是关于Navigation Controllers和Table Views的最后一个例子,稍微复杂了一点,但也仅仅是复杂而已,难度不大,我们开始吧. 如果没有上一篇的代码,可以从这里 ...

  7. mootools和jquery冲突的解决

    mootools-jquery 今天在做EcStore前台的做效果时,由于Jquery的插件比较多,于是就使用了Jquery的插件,但是发现会引起Mootools的冲突. 于是猛找资料,终于找到了,现 ...

  8. Net Core开源通讯组件 SmartRoute

    Net Core开源通讯组件 SmartRoute(服务即集群) SmartRoute是基于Dotnet Core设计的可运行在linux和windows下的服务通讯组件,其设计理念是去中心化和零配置 ...

  9. bndtools教程

    使用工具编程的确能给人们带来很多便利,但是在不会用之前,且缺乏相应的中文资料让你去了解时,真是一种折磨,同时也是一种挑战. bndTools其实就是用来开发OSGi的一个工具,它为开发提供了便利,具体 ...

  10. C#的配置文件App.config使用总结 - 转

    http://blog.csdn.net/celte/article/details/9749389 首先,先说明,我使用的app.config 配置文件的格式如下: <?xml version ...