<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. 初学Django

    纵然有众多大牛写过这些简单入门文章,但作为记录,还是要自己动手写下来的比较靠谱,‘好脑筋不如烂笔头’啊! Python 安装 Django本身是纯Python编写的,所以安装框架的第一步是确保你已经安 ...

  2. mysql_config_editor程序的用法

    1.mysql_config_editor程序的作用: 它只是用来在用户的家目录下生成一个.mylogin.cnf 里面保存有用于登录mysql-server端的password,host,user信 ...

  3. 基于IAP和Keil MDK的远程升级设计

    写在前面:三个周之前,我突然想写一个远程升级的程序.那个时候我只是大概知道IAP的意思是在应用编程,但怎么编,我还一无所知.我给自己定下一个个阶段目标,从最基础的代码一点点写起,解决一个又一个的问题. ...

  4. OC运行时和方法机制笔记

    在OC当中,属性是对字段的一种特殊封装手段. 在编译期,编译器会将对字段的访问替换为内存偏移量,实质是一种硬编码. 如果增加一个字段,那么对象的内存排布就会改变,需要重新编译才行. OC的做法是,把实 ...

  5. 泛型、注解、log4j

    泛型.注解.log4j 泛型:将运行阶段的类型错误提前到编译阶段. 声明泛型必须两端的一致,要么左面有,要么右边有,两边都有的两边必须一致. 泛型方法: static 之后 返回类型之前进行声明 泛型 ...

  6. 通过属性集名称获取属性集id

    Mage::getModel('eav/entity_attribute_set')->load('属性集名称', 'attribute_set_name')->getAttributeS ...

  7. Linux mint 17中文输入法安装，改动linux mint与windows7双系统启动顺序

    安装好linux mint17后,进入mint系统,首先须要一个比較合适的中文输入法. 一.首先迎来的就是安装中文输入法了,之前听说搜狗为ubuntu kinly定制了输入法,所以就想安装搜狗输入法, ...

  8. vb.net中让控件内容为空（Control类）

    在平常的敲系统中大家有没有遇到需要让Textbox控件或者其他的控件的显示内容为空,以前直接的做法是直接等于空值,如果此类控件有很多,都需要空值,难道都要设置一下它的值为空嘛,显然这是一个笨办法,有没 ...

  9. UART串口协议基础1

    Louis kaly.liu@163.com 串口协议基础 1 串口概述 串口由收发器组成.发送器是通过TxD引脚发送串行数据,接收器是通过RxD引脚接收串行数据. 发送器和接收器都利用了一个移位寄存 ...

  10. Java面试题Tomcat的优化经验

    一.掉对web.xml的监视,把jsp提前编辑成Servlet.有富余物理内存的情况,加大tomcat使用的jvm的内存 二.服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定性影响. ...