JQuery+Ajax无刷新分页的实例代码


Posted in Javascript onFebruary 08, 2014

先看效果图:
JQuery+Ajax无刷新分页的实例代码

实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下:
一、数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes

二、前台页面代码:

<head runat="server">
    <title>JQuery无刷新分页</title>
    <link href="Styles/common.css" rel="stylesheet" type="text/css" />
    <link href="Styles/paging.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
    <script type="text/javascript">    
    var pageIndex = 0;
    var pageSize = 3;    $(function() {       
        InitTable(0);              
        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',
            next_text: '下一页',
            items_per_page: pageSize,
            num_display_entries: 6,//连续分页主体部分分页条目数
            current_page: pageIndex,//当前页索引
            num_edge_entries: 2//两侧首尾分页条目数
        });
        //翻页调用
        function PageCallback(index, jq) {           
            InitTable(index);
        }

        //请求数据
        function InitTable(pageIndex) {                                
            $.ajax({ 
                type: "POST",
                dataType: "text",
                url: 'Ajax/PagerHandler.ashx',
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
                success: function(data) {                                 
                    $("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变)
                    $("#Result").append(data);//将返回的数据追加到表格
                }
            });            
        }
    });
    </script>
</head>

<form id="form1" runat="server">
    <center>
        <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;
            border: solid 1px #85A8BE;width:60%">
            <tr>
                <th style="width: 10%">
                    ID
                </th>
                <th style="width: 60%">
                    标题
                </th>
                <th style="width: 20%">
                    更新时间
                </th>
                <th style="width: 10%">
                    点击量
                </th>
            </tr>
        </table>
        <div id="Pagination" class="paging">
        </div>
    </center>
    </form>

三、页面后台文件

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

public string pageCount = string.Empty;//总条目数
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }

四、最主要的是ajax处理程序:PagerHandler.ashx
 public class PagerHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string str = string.Empty;
            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            int size = Convert.ToInt32(context.Request["pageSize"]);
            if (pageIndex == 0)
            {
                pageIndex = 1;
            }
            int count = 0;
            News n = new News();
            List<News> list = n.GetNewsList(pageIndex, size, ref count);
            StringBuilder sb = new StringBuilder();
            foreach (News p in list)
            {
                sb.Append("<tr><td>");
                sb.Append(p.News_id);
                sb.Append("</td><td>");
                sb.Append("<a href='#'>"+p.News_title+"</a>");
                sb.Append("</td><td>");
                sb.Append(p.News_time);
                sb.Append("</td><td>");
                sb.Append(p.News_readtimes);
                sb.Append("</td></tr>");
            }
            str = sb.ToString();
            context.Response.Write(str);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
Javascript 相关文章推荐
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
axios封装与传参示例详解
Oct 18 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 #Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 #Javascript
jquery ajax 局部刷新小案例
Feb 08 #Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 #Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 #Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 #Javascript
javascript运行机制之this详细介绍
Feb 07 #Javascript
You might like
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
bootstrap table小案例
2016/10/21 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
js实现搜索提示框效果
2020/09/05 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python数据类型强制转换实例详解
2020/06/22 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
钱学森电影观后感
2015/06/04 职场文书
董事会决议范本
2015/07/01 职场文书
2016党校学习心得体会
2016/01/07 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis