先看效果图：

实现原理很简单，使用了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. JSON与null

    org.json.JSONObject orgJSON = new org.json.JSONObject(); // The method put(String, Collection) is am ...

  2. 初进JAVA职场面试小技巧:一个老学长的吐血之作!

    看着一批批小白的遭遇,有些无奈,又跟我年轻时有些类似.今天正好有点时间,给你几个建议. 1.在结业之前一定要把自己参与过的项目仔细审视一下,一点要特别熟悉项目的流程功能,另外也要重视自己做过的模块,看 ...

  3. SQL语句整理(二) 数据定义语言DDL

    前言: 这是我学数据库时整理的学习资料,基本上包括了所以的SQL语句的知识点. 我的教材是人大王珊老师的<数据库系统概论>. 因为是手打的,所以会用一些细节打错了,但都挺明显也不多(考完试 ...

  4. Android加载大图片实例详解

    摘要:在Android下采用ARGB表示颜色,每个像素占四个字节.其加载图片申请空间时与图片的实际大小没有关系,与像素有关系.

  5. wampserevr安装redis和mongo扩展

    1.下载redis对应的扩展.dll文件(php_redis.dll)和php_igbinary.pdb文件以及php_mongo.dll文件(对应版本)慢慢试 2.把找好的对应好的版本放到 D:\p ...

  6. css3特别篇图解FlexBox

    图文转自微博网友勾三股四 一.flex-direction 二.flex-wrap 三.justify-content 四.align-items 五.align-content

  7. laravel验证码

    登录验证码 1.首先,进入https://github.com/mewebstudio/captcha,根据captcha上的使用方法一步步来实现验证码的安装,因为是laravel5.7,所以选择了c ...

  8. （1-3）line-height与图片的表现

    (1-3)line-height与图片的表现 这篇文章真的很重要,耐心看,重中之重. 一.行高和图片的表现 图片和行高有什么歪腻呢?? 很多人不明白,为什么我图片好好的放在一个标签里面它就出现了如下问 ...

  9. webstorm启动后右下角总有进程在扫描

    启动webstorm后,右下角有一个扫描的任务总在执行,其他操作很卡. 搜索后找到一个办法:在node-modules右键,选择Mark Directory As选择exclude 具体原因没找到.

  10. Python-正则表达式实现计算器功能

    需求: 用户输入运算表达式,终端显示计算结果 源代码: # !/usr/bin/env/ python3 # -*- coding: utf-8 -*- """用户输入计 ...