先看效果图：

实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：

一、数据库表结构：很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes

二、前台页面代码：

  1. <head runat="server">
  2. <title>JQuery无刷新分页</title>
  3. <link href="Styles/common.css" rel="stylesheet" type="text/css" />
  4. <link href="Styles/paging.css" rel="stylesheet" type="text/css" />
  5. <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  6. <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. var pageIndex = 0;
  9. var pageSize = 3;
  10. $(function() {
  11. InitTable(0);
  12. $("#Pagination").pagination(<%=pageCount %>, {
  13. callback: PageCallback,
  14. prev_text: '上一页',
  15. next_text: '下一页',
  16. items_per_page: pageSize,
  17. num_display_entries: 6,//连续分页主体部分分页条目数
  18. current_page: pageIndex,//当前页索引
  19. num_edge_entries: 2//两侧首尾分页条目数
  20. });
  21. //翻页调用
  22. function PageCallback(index, jq) {
  23. InitTable(index);
  24. }
  25. //请求数据
  26. function InitTable(pageIndex) {
  27. $.ajax({
  28. type: "POST",
  29. dataType: "text",
  30. url: 'Ajax/PagerHandler.ashx',
  31. data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
  32. success: function(data) {
  33. $("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
  34. $("#Result").append(data);//将返回的数据追加到表格
  35. }
  36. });
  37. }
  38. });
  39. </script>
  40. </head>
  1. <form id="form1" runat="server">
  2. <center>
  3. <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;
  4. border: solid 1px #85A8BE;width:60%">
  5. <tr>
  6. <th style="width: 10%">
  7. ID
  8. </th>
  9. <th style="width: 60%">
  10. 标题
  11. </th>
  12. <th style="width: 20%">
  13. 更新时间
  14. </th>
  15. <th style="width: 10%">
  16. 点击量
  17. </th>
  18. </tr>
  19. </table>
  20. <div id="Pagination" class="paging">
  21. </div>
  22. </center>
  23. </form>

三、页面后台文件

这里主要是获取记录总数：

public string pageCount = string.Empty;//总条目数

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }

四、最主要的是ajax处理程序：PagerHandler.ashx

    1. public class PagerHandler : IHttpHandler
    2. {
    3. public void ProcessRequest(HttpContext context)
    4. {
    5. context.Response.ContentType = "text/plain";
    6. string str = string.Empty;
    7. int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
    8. int size = Convert.ToInt32(context.Request["pageSize"]);
    9. if (pageIndex == 0)
    10. {
    11. pageIndex = 1;
    12. }
    13. int count = 0;
    14. News n = new News();
    15. List<News> list = n.GetNewsList(pageIndex, size, ref count);
    16. StringBuilder sb = new StringBuilder();
    17. foreach (News p in list)
    18. {
    19. sb.Append("<tr><td>");
    20. sb.Append(p.News_id);
    21. sb.Append("</td><td>");
    22. sb.Append("<a href='#'>"+p.News_title+"</a>");
    23. sb.Append("</td><td>");
    24. sb.Append(p.News_time);
    25. sb.Append("</td><td>");
    26. sb.Append(p.News_readtimes);
    27. sb.Append("</td></tr>");
    28. }
    29. str = sb.ToString();
    30. context.Response.Write(str);
    31. }
    32. public bool IsReusable
    33. {
    34. get
    35. {
    36. return false;
    37. }
    38. }
    39. }

jquery分页例子的更多相关文章

  1. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  2. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  3. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  4. Struts1+JQuery的例子

    Struts1+JQuery的例子 2014年2月10日 11:25 Struts1+JQuery+JSON/XML的例子 1.Struts+JQuery+XML struts-config.xml如 ...

  5. 简单的JQuery分页代码

    1. [代码][JavaScript]代码      001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  6. JQuery 分页实现

     JQuery分页实现  css: .liList0 { padding-left:5px;}.liList0 li { width:160px; float:left; display:inline ...

  7. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  8. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  9. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

随机推荐

  1. C# wx获取token基本方法

    #region 请求Url,不发送数据 /// <summary> /// 请求Url,不发送数据 /// </summary> public static string Re ...

  2. crontab 设置服务器定期执行备份工作

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  3. 4、springboot之全局异常捕获

    1.新建一个springboot项目 添加一个全局异常的类 import org.springframework.web.bind.annotation.ControllerAdvice; impor ...

  4. IntelliJ IDEA16 热部署，解决每次修改java文件就得重启tomcat的问题

    这样就可以了....

  5. jquery not() 方法

    1.not(expression) 根据表达式参数的值,从包装集里删除元素 example : $('img[alt]').not('[alt*=joy]') 返回包含属性alt的img元素,但img ...

  6. webstorm添加自定义代码块

    widnow下使用alt+ctrl+s 调出setting面板 mac下使用command+,(逗号)调出Preferences面板 搜索live template选中js,在javascrpt 模板 ...

  7. CentOS 7运维管理笔记(7)----Apache 基于端口的虚拟主机配置

    如果一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配置. (1) 在虚拟机的CentOS7服务器上配置 eth0:4 为192.168.1.214: (2) ...

  8. 提问的智慧 How To Ask Questions The Smart Way

    提问的智慧 How To Ask Questions The Smart Way Copyright © 2001,2006,2014 Eric S. Raymond, Rick Moen 本指南英文 ...

  9. win7 64 位安装 python，提示： 0x80240017-未指定的错误

    首先确保从python官网下载正确的python版本: https://www.python.org/downloads/windows/ 然后,应该是 VC 相关的问题. 去微软网站下载下列补丁包即 ...

  10. ArrayList 与 List 关系与代码示例 - Java

    关系 List 是 Java Interface, ArrayList 是 Java Class,它们都属于 java.util 包. Java List 是有序的集合(ordered collect ...