<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. json对象和json字符串转换方法

    在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换.JSON数据的解析是关键. 先明 ...

  2. mongo设计（一）

    原文:http://blog.mongodb.org/post/87200945828/6-rules-of-thumb-for-mongodb-schema-design-part-1 By Wil ...

  3. Unix/Linux环境C编程入门教程(20) 搭建基于Mac的 Xcode 与 QT 开发环境

    1.启动 Vmware,如果没有 VMware 的同学,请看前面我们搭建 VMware 的视频 2.打开虚拟机以后,出现虚拟机界面 3 新建一个虚拟机 4 选择自定义,单击下一步 5 选择默认的 VM ...

  4. Android混淆、反编译以及反破解的简单回顾

    =========================================================================虽然反编译很简单,也没下面说的那么复杂,不过还是转了过 ...

  5. POJ 3662 Telephone Lines（二分答案+SPFA）

    [题目链接] http://poj.org/problem?id=3662 [题目大意] 给出点,给出两点之间连线的长度,有k次免费连线, 要求从起点连到终点,所用的费用为免费连线外的最长的长度. 求 ...

  6. 解决Admob Banner首次展示不显示的问题

    Admob banner在第一次虽然加载成功了,但是却不显示.然后等待60秒刷新自动刷新,banner就能正常显示. 如果你没遇到过这种情况,那可能你用的不是集成在play-services里的库,因 ...

  7. 修改TOMCAT服务器图标为应用LOGO

    在tomcat下部署应用程序,运行后,发现在地址栏中会显示tomcat的小猫咪图标.有时候,我们自己不想显示这个图标,想换成自己定义的的图标,那么按如下方法操作即可: 参考网上的解决方案:1.将$TO ...

  8. ros消息时间同步与回调

    转载自http://blog.csdn.net/zyh821351004/article/details/47758433 方式一: 全局变量形式  : TimeSynchronizer 步骤: 1. ...

  9. OC 语法基础一

    1.判断字符串开头 或 结尾 测试字符串是否以aString开始 - (BOOL)hasPrefix:(NSString *)aString; 测试字符串是否以aString结尾 - (BOOL)ha ...

  10. git 删除远程主分支及其它操作

    1. 删除远程分支 如果不再需要某个远程分支了,比如搞定了某个特性并把它合并进了远程的 master 分支(或任何其他存放稳定代码的地方),可以用这个非常无厘头的语法来删除它:git push [远程 ...