<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