先看效果图：

实现原理很简单，使用了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. Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）

    Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的.相信看过上一篇<偏移动画(Tra ...

  2. easyui表单校验拓展

    /** * Created by chaozhou on 2016/5/30. */ /** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.ru ...

  3. 初步理解impress.js

    1.认识impress.js impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具). 现在普通开发者可以利用 impress.js 自己 ...

  4. golang 应用的部署相关技术

    nohup命令 在 linux 下面部署,我们可以利用 nohup 命令,把应用部署在后端,如下所示: nohup ./yourapp & 这样你的应用就跑在了 Linux 系统的守护进程 n ...

  5. db缓存设计

    http://www.cnblogs.com/herm/archive/2012/11/11/2773887.html

  6. IoDH 实现的单例模式

    饿汉式单例类不能实现延迟加载,不管将来用不用始终占据内存:懒汉式单例类线程安全控制烦琐,而且性能受影响.有种更好的单例模式叫做Initialization Demand Holder (IoDH)的技 ...

  7. 谈谈我从工作中理解的CDN

    一.CDN定义 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过 ...

  8. sql: TRIGGER

    --Common Table Expressions(CTE) WITH HighSample (SampleId,SampleTitle,SampleContent) AS ( SELECT Sam ...

  9. 一道google的面试题(据说)

    1. 原题(同事给的) Max Howell 参加了谷歌的面试,出题人竟然要求 Max Howell 在白板上作出解答,Max Howell 当然愤怒地拒绝了,回家以后马上在微博上跟我们分享他的吐槽: ...

  10. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...