采用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底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源--IOS_Dialog_Library

    本文转载于:http://blog.csdn.net/zhangphil/article/details/44940339 完成这个效果的是使用了 IOS_Dialog_Library 下载地址:ht ...

  2. js 数组去重复键

    Array.prototype.deleteEle = function() { var newArr = this; for (var i = newArr.length - 1; i >= ...

  3. Android NDK环境配置

    之前做了一个基于ffmpeg的软解播放器,熟悉了NDK开发的配置环境过程,但是由于太忙一直没有时间写笔记. 首先,介绍一下在这里所参与协作的软件包: 1. JDK: 这个软件被Eclipse依赖. 2 ...

  4. 在 SQL Server 中的网络数据库文件的支持说明

    其实就是一个学员问SQL Server 是否能存放的于NAS(UAC 的路径下). 官方的回答简略版本为:可以,需要满足一些强制性的硬件要求.但需要考虑一系列的性能的问题. http://suppor ...

  5. linux常用命令收集（持续中）

    mv  :  既可以重命名,又可以移动文件或文件夹 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c 其实在文本模式中要重命名文件或目录的话也是 ...

  6. 数据分析≠Hadoop+NoSQL，不妨先看完善现有技术的10条捷径(分享)

            Hadoop让大数据分析走向了大众化,然而它的部署仍需耗费大量的人力和物力.在直奔Hadoop之前,是否已经将现有技术推向极限?这里总结了对Hadoop投资前可以尝试的10个替代方案, ...

  7. 【HTML5】websocket 初识

    什么是WebSocket API? WebSocket API是下一代客户端-服务器的异步通信方法.该通信取代了单个的TCP套接字,使用ws或wss协议,可用于任意的客户端和服务器程序.WebSock ...

  8. creating indexing for SQL tunning

    1. Not so long time ago, I got a report from customer. It's reported that they had a report getted v ...

  9. Memcache+Tomcat9集群实现session共享(非jar式配置, 手动编写Memcache客户端)

    Windows上两个tomcat, 虚拟机中ip为192.168.0.30的centos上一个(测试用三台就够了, 为了测试看见端口所以没有使用nginx转发请求) 开始 1.windows上开启两个 ...

  10. getHeight returns 0 for all Android UI objects

    It's 0 because in both onCreate and onStart, the view hasn't actually been drawn yet. You can get ar ...