采用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. 图片放大缩小（和ViewPager配合使用流畅显示）--第三方开源--PhotoView

    图片的放大缩小实现效果是使用的github上的一个开源项目photoView实现的,下载地址:https://github.com/chrisbanes/PhotoView 下面看测试代码: acti ...

  2. Spark菜鸟学习营Day1 从Java到RDD编程

    Spark菜鸟学习营Day1 从Java到RDD编程 菜鸟训练营主要的目标是帮助大家从零开始,初步掌握Spark程序的开发. Spark的编程模型是一步一步发展过来的,今天主要带大家走一下这段路,让我 ...

  3. Python开发【第一篇】Python基础之装饰器

    写代码要遵循开发封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭:已实现的功能代码块开放:对扩展开发 #s2 ...

  4. line-height属性使文字垂直居中原理

    原理:line-height与font-size的计算之差(在CSS中成为“行间距”)分为两半,分别加到一个文本内容的顶部和底部,这样就使得文字垂直居中了.

  5. JavaScript中使用console调试程序的坑

    上DEMO a = {key1: [1, 2], 'key2': {'key4': '11'}, 'key3': [1, 2]} console.info(1,a) a.key2.key4 = '22 ...

  6. 编写php拓展实例--slime项目（用户登录会话类）

      最近公司换了yaf框架,突然对用c实现php拓展感兴趣了,如果一个功能已经很稳定很成熟而且用的地方很多,那么我们就可以尝试用拓展实现(不一定每种情况都可以写成拓展),写成拓展后就不用每次用都包含一 ...

  7. 1099. Build A Binary Search Tree (30)

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  8. Oracle收缩表空间

    可以使用 alter database datafile 'file path...' resize xM 的命令来缩小数据文件. SELECT 'alter database datafile '' ...

  9. Daject初探 - 从Table模型得到Record模型

    前言: 如果你还不知道Daject是什么,如何使用,可以浏览 http://www.cnblogs.com/kason/p/3577359.html github地址:https://github.c ...

  10. C语言中的字符串拷贝函数strcpy和内存拷贝函数memcpy的区别与实现

    strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制字符串的结束符'\0'. 已知st ...