<html>

    <body>

        <div id="datagrid">

        </div>

        <div id="pagination">

        </div>

    </body>

    <script src="http://image.**.com/common/js/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="js/jquery.pagination.js"></script>

    <script type="text/javascript">

        var pagination = {

            $divPagination: $('#pagination'), //分页控件容器

            $divDatagrid: $('#datagrid'), //数据容器

            urlRecordCount: "index.php?c=homepage&m=prizeRecordCount", //接口返回数据的总行数

            urlRecordLists: "index.php?c=homepage&m=prizeLogLists&pageIndex=", //接口返回JSON格式的数据

            callback: function(pageIndex, $divPagination) {

                $.getJSON(pagination.urlRecordLists + pageIndex, function(jsonRecordLists) {

                    if (jsonRecordLists == undefined || jsonRecordLists.length == 0) {

                        pagination.$divDatagrid.html('没有数据');

                        return false;

                    }

                    html = '';

                    $.each(jsonRecordLists, function(index, item) {

                        html += '奖品:' + item['prize_name'] + '    时间:' + item['create_time'] + '<br/>';

                    });

                    pagination.$divDatagrid.html(html);

                });

                return false;

            },

            initPagination: function() {

                $.getJSON(pagination.urlRecordCount, function(recordCount) {

                    pagination.$divPagination.pagination(recordCount, {

                        callback: pagination.callback,

                        items_per_page: 10, //pageSize

                        next_text: '下一页',

                        next_show_always: false, //当下一页无法使用时是否显示,true(默认)

                        prev_text: '上一页',

                        prev_show_always: false,

                        link_to: 'javascript:void(0);', //分页href中的内容,#(默认)

                        num_display_entries: 11, //最多显示多少分页链接:11(默认),0(只显示上一下和下一页)

                        num_edge_entries: 1, //1(任何情况下都显示第一页和最后一页),0(不显示)

                        ellipse_text: '...', //当num_edge_entries>0时,分页使用的省略符号

                        current_page: 0, //默认pageIndex,0(默认),false(不加载)

                        load_first_page: true, //第一次自动加载,true(默认),false(不加载)

                    });

                });

            }

        };

        $(document).ready(function() {

            pagination.initPagination();//分页控件初始化

        });

    </script>

</html>

//php后台返回JSON数据

        $pageIndex = intval($this->input->get('pageIndex'));

        $test = $this->homepage_model->getPrizeLogLists($pageIndex, 10);

        $test = eval('return ' . iconv('gbk', 'UTF-8', var_export($test, true) . ';'));

        exit(json_encode($test));
JQuery_pagination:https://github.com/gbirke/jquery_pagination

jQuery Pagination Plugin ajax分页控件的更多相关文章

  1. ajax 分页控件，基于jquery

    /* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...

  2. 基于jquery扩展漂亮的分页控件（ajax）

    分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...

  3. 使用jQuery Pagination Plugin实现分页效果

    最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了:项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式 ...

  4. 基于avalon+jquery做的bootstrap分页控件

    刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...

  5. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  6. MVC4 5分页控件，支持Ajax AjaxOption支持

    MVC4 5分页控件,支持Ajax AjaxOption支持 /// <summary> /// MVC4 5分页控件,支持Ajax AjaxOption支持 beta 1.0 /// 用 ...

  7. jquery 分页控件(二)

    上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...

  8. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...

  9. jquery 分页控件（一）

    以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许还很多.个人觉得,适合自己用就 ...

随机推荐

  1. C#获取Excel Sheet名称,对特殊字符、重名进行了处理

    /// <summary>        /// 获取指定Excel内Sheet集合        /// </summary>        /// <param na ...

  2. HTTP缓存缓存机制

    http协议无状态,所以缓存设定从两方面考虑.客户端浏览器和服务器端. 浏览器端实现过期机制. 服务器端实现验证机制. 缓存机制. 为了减轻服务器负担,也减少网络传输数量.http1.0定义了Expi ...

  3. Looper、Hander、HandlerThread

    一.Message .Looper.Handler之间的关系 1.系统发送的Message消息传送给Handler,Handler将Message放入自己的looper队列的底部   然后再从Loop ...

  4. 给ecshop后台增加管理功能页面

    给ecshop后台增加管理功能页面 比如我们增加一个统计报表叫做 物流费用统计报表 放在后台“报表统计”栏目中 具体操作步骤: 第一步,我们要添加一个菜单到后台,然后设置语言项,最后设置权限,这样,后 ...

  5. 关于Char* ,CString ,WCHAR*之间的转换问题

    GDI+所有类的接口函数如果要传递字符串作为参数的话,似乎都用UNICODE串,即WCHAR*.我开始也被整得晕头转向,因为窗口编程所用往往是CString,用IO流读文件数据又得到char *.得益 ...

  6. 普林斯顿大学算法课 Algorithm Part I 学习资源

    网友笔记参考 果壳Mooc首页 revilwang的专栏 白色咖啡 Weiran Liu的渣技术小专栏 Bug表:http://findbugs.sourceforge.net/bugDescript ...

  7. 帮助中心 7D-我的私家设计师 设计师品牌服饰集成网 7D服装定制！

    帮助中心 7D-我的私家设计师 设计师品牌服饰集成网 7D服装定制! 关于我们

  8. Redis简介以及如何在Windows上安装Redis

    Redis简介 Redis是一个速度非常快的非关系型内存数据库. Redis提供了Java,C/C++,C#,PHP,JavaScript,Perl,Object-C,Python,Ruby,Erla ...

  9. mysql同时update多行

    当我们只更新一个字段时的语法如下: UPDATE mytable     SET myfield = CASE other_field         WHEN 1 THEN 'value'     ...

  10. wdos相关问题解答

    wdos系统自动分区的大小说明 wdOS系统提供了可自动分区和手工分区 自动分区适用大部分新手或对分区没有特的要求的人 手工分区适用老手或熟悉分区或有特别需求的人 具体用哪个,没多大区别,关键是看应用 ...