采用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. mysql 的数据类型

    mysql 的数据类型(描述的是字段)三大类:一.整型:1.tinyint(M),其中M是显示宽度,需要配合zerofill,就是前面0填充,存储单位为1个字节(8位),无符文是最大能存储范围0000 ...

  2. Python脚本控制的WebDriver 常用操作 <二十六> 上传文件

    测试用例场景 上传文件的方法是找到上传文件的对象,通常是的对象.然后直接往这个对象send_keys,传入需要上传文件的正确路径.绝对路径和相对路径都可以,但是上传的文件必须存在,否则会报错. Pyt ...

  3. MVVM学习

    1:MVVMLight中通过IOC注册的服务或者是类是全局的整个工程都能访问到 2:向下的结构(viem→VM→Model)也不严格是这样 3:延迟SimpleIoc的注册 4:在Navigatedt ...

  4. Google protobuf安装

    1:需要安装sudo apt-get install x11-apps libwayland-ltst-client0 libtxc-dxtn-s2tc0 x11-session-utils  x11 ...

  5. FindWindow（）&&FindWindowEx

    这个函数呢,我一般用来自动刷刷网页啥的比如我最近就在刷52破解的在线时间,好啦怎么用是你自己的事情. FindWindow()主要用来获取目标句柄 或着说窗口的权限 HWND FindWindow( ...

  6. 包装设计模式的实现以改进BufferedReader中的readLine方法为例

    实现与目标对象相同的接口     BufferedReader 定义一个变量记住目标对象 定义一个构造器接收被增强对象 覆盖需要增强的方法 对于不想增强的方法,直接调用目标对象的方法. package ...

  7. 使用OPTIMIZE TABLE命令来整理表碎片实践

    操作环境:ubuntu 14.10   mysql 5.6.25 对含有BLOB或TEXT字段的表,若经常做修改或删除类的操作,需要定期执行OPTIMIZE TABLE命令来整理碎片. 1.creat ...

  8. LoadRunner 学习笔记（2）VuGen运行时设置Run-Time Setting

    定义:在Vugen中Run-Time Setting是用来设置脚本运行时所需要的相关选项

  9. Careercup - Facebook面试题 - 4907555595747328

    2014-05-02 07:49 题目链接 原题: Given a set of n points (coordinate in 2d plane) within a rectangular spac ...

  10. 3243: [Noi2013]向量内积 - BZOJ

    Description 两个d 维向量A=[a1,a2,...,ad]与B=[b1,b2,...,bd]的内积为其相对应维度的权值的乘积和,即: 现有 n 个d 维向量x1,...,xn ,小喵喵想知 ...