<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