采用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. Android little error records

    1:在清单文件(Manifest)中加入权限时要注意,如下例: <uses-permission android:name="android.permission.CHANGE_NET ...

  2. sql中的系统表sysobjects以及如何查看sql语句的执行时间

    使用sysobjects可以快速查看数据库中表.视图.存储过程.触发器.约束等的信息. 大牛文章:http://www.cnblogs.com/atree/p/SQL-Server-sysobject ...

  3. Lambda（2）

    Lambda表达式是匿名方法的超集,处理匿名方法有的功能外,还有其他的功能: 1.能够推测出参数的类型,无需显示声明 2.支持语句块和表达式作为方法体 Lambda表达式的书写方式: Lambda表达 ...

  4. 用Redis bitmap统计活跃用户、留存

    Spool的开发者博客,描述了Spool利用Redis的bitmaps相关的操作,进行网站活跃用户统计工作. 原文:http://blog.getspool.com/2011/11/29/fast-e ...

  5. Splitter

    <!DOCTYPE html> <html> <head> <title>PDemo</title> </head> <b ...

  6. mysql笔记整理

    删除整个表 TRUNCATE TABLE 表名; 持久链接 自动提交

  7. How to: Add Missing ContentPlaceHolder

    In Microsoft SharePoint Server 2010, the BlueBand master page is not supported in the Search Center ...

  8. Eclipse启动的时候窗口一闪就关的解决办法（转）

    有时候会碰到如题这种问题,从网上查知解决办法,非常管用 为eclipse.exe创建一个快捷方式,然后快捷方式上右键-属性,在目标栏填入 E:\eclipse\eclipse.exe -vm &quo ...

  9. 《Dive into Python》Chapter 4 笔记

    自省:Python中万物皆对象,自省是指代码可以查看内存中以对象形式存在的其它模块和函数,获取它们的信息,并对它们进行操作.用这种方法,可以定义没有名称的函数,不按函数声明的参数顺序调用函数,甚至引用 ...

  10. mysql数据库备份及恢复命令mysqldump,source的用法

    还原一个数据库:mysql -h localhost -u root -p123456 www<c:/www.sql 备份一个数据库:mysqldump -h localhost -u root ...