<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. jQuery 随滚动条滚动效果 （固定版）

    //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...

  2. win10使用python开发工具pycharm首次安装配置

    刚才在网页上写了一半,结果网页出现了意外,然后,再打开什么都没有了,说多都是泪啊,我以为博客会自动保存草稿的呢,看来是我高估了它的功能然而现在根本没有心情写了... 因为出现了意外,果断的不在网页端编 ...

  3. 各种语言中的urlencode方法

    转载自:http://blog.sina.com.cn/s/blog_3f195d2501000a9b.html URLENCODE和URLDECODE是比较常用的URL参数转换方法,为以后使用方便, ...

  4. QT5中QString与char *的相互转换

    以例子说明: #include <QApplication> #include <QDebug> #include <QString> #include <Q ...

  5. MYSQL 二进制还原

    解决方法: mysqlbinlog bin_log_file_path_and_name | mysql -uroot -p 如: mysqlbinlog E:\DB\mysql_log\mysql_ ...

  6. oc @property参数

  7. [Django] html 前端页面jQuery、图片等路径加载问题

    严格的说这个话题应该属于一个html前端路径加载问题.为了实现一个局部更新页面的功能,简单了解了一下Ajax.Ajax是一个为了实现浏览器和服务器异步通信功能的模块.严格来说不是一个新的语言,只是JS ...

  8. jsonarray----->list

    JSONArray--------------->List----------------->Adapter------------------>ListView

  9. Gradle DSL method not found: 'android()

    原文错误提示: Error:(16, 0) Gradle DSL method not found: 'android()'Possible causes:<ul><li>Th ...

  10. 拓扑图弹力布局呈现Flickr图片搜索结果：智能创新

    十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有 ...