分享

js 分页控件

 丶平上 2016-07-14
<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));

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多