先看效果图：

实现原理很简单，使用了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. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  2. Why Isn't curr_items Decreasing When Items Expire?

    Why Isn't curr_items Decreasing When Items Expire?

  3. python----openpyxl模块

    openpyxl 模块 1.openpyxl的写 from openpyxl import Workbook wb = Workbook() # 方式一: 默认创建sheet在最后 wb1 = wb. ...

  4. java.util.concurrent.CountDownLatch 使用

    1. 概述 CountDownLatch是java的一个并发工具(java.util.concurrent.CountDownLatch), 闭锁. 主要功能是阻塞调用其await()方法的线程,直到 ...

  5. jQuery对html元素取值与赋值

    以下总结了常用的jQuery选择器对html元素取值与赋值 Textbox:  var str = $('#txt').val(); $('#txt').val("Set Lbl Value ...

  6. 【阿里云产品公测】性能测试服务PTS的初步尝试

        性能测试服务PTS,对于像我这样对测试毫无概念的新手来说,这服务真的太好了,使用简单,官方教程又明细,连我这样的新手一看都明白了怎样使用. _%GGl$kH   下面是我来简单尝试一下,更多功 ...

  7. IE8下的怪异模式

    使用DWZ框架,老是出现点击button后在winxp IE8下出现新页面,经过检查后发现IE8下submit后,return false就不行了,必须使用window.event.returnVal ...

  8. Hush Framework框架配置(转)

    在写这篇文章的时候,楼主已经饿的不行了,因为我从3点开始就在折腾Hush Framework,走了很多弯路,打铁要趁热,先把基本的过程记录下来,留待以后翻阅,同时记录其中容易走弯路的地方,特别是对于一 ...

  9. 使用spring aop遇到的坑

    1.aop 切点配置无误但只对控制器无效. 检测你的aop开启配置是否放在了spring配置文件中,如果是请把它移到mvc配置文件中. 我们知道当spring项目使用了spring mvc时,项目是存 ...

  10. androidcoookie

    https://segmentfault.com/a/1190000002877843 目前在操作登录的coookie,js和原生