先看效果图：

实现原理很简单，使用了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. XAMl使用其他命名空间中的类型及加载和编译

    以前我们讲过XAMl命名空间.为了使便宜钱知道XAMl文档中元素对应的.NET类型,需要知道XAMl明档中指定特定的两个命名空间.XAML是一种实例化.NET对象的通用方法 ,除了可以实例化一些标准的 ...

  2. Java 并发(一) --- CAS

    CAS 原理 先来看看下面的代码是否可以输出预期的值.开启了两个线程,是否会输出200 呢 结果由于并发的原因,结果会小于或等于200 , 原因出现在 count++; 由于这一行代码存在三个操作: ...

  3. ActiveMQ整合spring结合项目开发流程(生产者和消费者)总结

    一:生产者代码编写: 1.配置pom.xml引入相关坐标 <dependencies> <!-- spring开发测试 --> <dependency> <g ...

  4. 第十三章.MySQL数据库与JDBC编程（下）

    JDBC的典型用法: JDBC4.2常用接口和类简介: DriverManager:用于管理JDBC驱动的服务类,程序中使用该类的主要功能是获取Connection对象,该类包含如下方法: publi ...

  5. PHP支持多线程吗？

    https://zhidao.baidu.com/question/2053529640037778107.html

  6. 响应式(2)——bootstrap的响应式

    <meta name="viewport" content="width=device-width,user-scalable=no"/> < ...

  7. IO流之打印流

    打印流的概述(只有输出就是只与数据目的有关,不会抛出IO异常) 打印流添加输出数据的功能,使它们能够方便地打印各种数据值表示形式. 打印流根据流的分类: l  字节打印流  PrintStream l ...

  8. 前端之body标签中相关标签（一）

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  9. iis添加共享目录为虚拟目录

    注意物理路径处不能直接选择映射成的本地盘符!!!

  10. easyui numberbox 输入框禁止输入

    { field: 'Amount', title: '金额', width: 80, editor: { type: 'numberbox', options: { disabled: true, p ...