首页 > 代码库 > Table 分页处理
Table 分页处理
介绍两种table分页处理：PHP分页 和 js（jquery.table）分页。
一：jquery.table:
1:下载两个文件：table_jui.css 和 jquery.dataTables.min.js（当然前面的加载 jquery.js文件）；将其拉入html 前面。
table_jui.css 和 jquery.dataTables.min.js
2：建表：
1 <table style="width: 100%; margin-bottom:8px; " class="dataTables_wrapper table" id="tablemsg"> 2 <thead style="font-size: 15px; font-weight: 800; background-color: #E7E5DA;"> 3 <tr> 4 <td>用户ID</td> 5 <td>反馈问题</td> 6 <td>设备类型</td> 7 <td>应用版本</td> 8 <td>系统版本</td> 9 <td>反馈时间</td>10 <td>最后回复</td> 11 </tr>12 </thead>13 <tbody id="tablelise" style="table-layout: fixed; word-wrap: break-word;">14 <tr>15 <td></td>16 <td></td>17 <td></td>18 <td></td>19 <td></td>20 <td></td>21 <td></td> 22 </tr>23 </tbody>24 </table>
3：js插入数据：
1 function showGcmList() { 2 3 var datable = $(‘#tablemsg‘).dataTable({ "bDestroy": true}); 4 datable.fnClearTable(); 5 6 for (var i = 0; i < data.length; i++) { 7 8 9 $tr = $(‘<tr>‘ +10 ‘<td>‘ + data[i].userid + ‘</td>‘ +11 ‘<td>‘ + msg + ‘</td>‘ +12 ‘<td >‘ + data[i].devicetype + ‘</td>‘ +13 ‘<td >‘ + data[i].appver + ‘</td>‘ +14 ‘<td >‘ + data[i].osver + ‘</td>‘ +15 ‘<td >‘ + data[i].msgtime + ‘</td>‘ +16 ‘<td>‘+ data[i].id + ‘</td>‘ + 17 ‘</tr>‘)18 19 $(‘#tablelise‘).append($tr);20 }21 $("#tablelise tr:odd").addClass("tabEven");22 tableui();23 }
注： var datable = $(‘#tablemsg‘).dataTable({ "bDestroy": true}); datable.fnClearTable(); 是对table中的数据清空（同$(‘#tablelise‘).empty();）.
4：tableui() 函数就是对table表的渲染（每个属性，下面会有详细介绍）：
1 function tableui() { 2 3 $(function () { 4 $("#tablemsg").dataTable({ //表的ID 5 "bDestroy": true, 6 7 "bPaginate": true, //开关，是否显示分页器 8 "bJQueryUI": false, //开关，是否启用JQueryUI风格 9 "bAutoWidth": false, //自适应宽度10 "bFilter": true, //是否显示模糊查询11 "bProcessing": false,12 "bStateSave": true, //是否开启cookie，当需要对table的数据处理后，依然停留在该页数据。13 "bSort": true, //是否排序14 "bLengthChange": true, //开关，是否显示每页大小的下拉框15 "aLengthMenu": [30, 50, 60],//下拉框的值16 "iDisplayLength": 30, //下拉框的初始值17 18 "aaSorting": [[5, "desc"]], //当bSort为true是起作用，即table的第6行按降序排。19 "sPaginationType": "full_numbers", //table脚标显示20 "aoColumns": [ //每列的宽度（可省略）21 { sWidth: ‘80px‘ },22 { sWidth: ‘23%‘ },23 { sWidth: ‘80px‘ },24 { sWidth: ‘80px‘ },25 { sWidth: ‘80px‘ },26 { sWidth: ‘100px‘ },27 { sWidth: ‘23%‘ }, 28 ],29 30 "oLanguage": {31 "sProcessing": "正在加载中......",32 "sLengthMenu": "每页显示 _MENU_ 条记录",33 "sZeroRecords": "对不起，查询不到相关数据！",34 "sEmptyTable": "表中无数据存在！",35 "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",36 "sInfoFiltered": "数据表中共为 _MAX_ 条记录",37 "sSearch": "模糊搜索",38 "oPaginate": {39 "sFirst": "首页",40 "sPrevious": "上一页",41 "sNext": "下一页",42 "sLast": "末页"43 }44 }45 });46 });47 }
5：效果：
"bFilter" : true 属性是否显示搜索： 
"bLengthChange": true 属性是否显示每页的显示值： 
其中 aLengthMenu 的值为下拉框的各个值，iDisplayLength 为初始值。
"sPaginationType": "full_numbers" 属性设置分页脚的显示样式 
最终显示效果：
二：PHP分页（ThinkPHP）：
1：准备分页类文件 Page.class.php (类位于 /ThinkPHP/Library/Org/Util/ 文件夹下，如果没有，可在网上下载)。
2：后台PHP代码 function showTable（）：
1 function showTable(){ 2 $table = M ( ‘msg‘, ‘‘, ‘DB_CONFIG‘ ); 3 if(isset($_GET[‘p‘])){ 4 $p=$_GET[‘p‘]; 5 6 }else{ 7 $p=1; 8 } 9 10 import("Org.Util.Page");//加载分页类11 12 $countaql=‘select count(1) as count from fb_msg_android where userfeedback <> 0‘; 13 $count = $table->query($countaql); //查询数据14 15 $page=new \Page(intval($count[0][‘count‘]),8); //第一个参数是 数据总数，第二个参数是 每页显示的数据个数16 17 18 $sqlstrmsg="select * from fb_msg_android where userfeedback <> 0 limit $page->firstRow,$page->listRows"; 19 $data = $table->query($sqlstrmsg); //查询数据，从第一条到第8条20 21 $page->setConfig(‘header‘,‘条记录‘); //分页脚标设置22 $page->setConfig(‘prev‘,"上一页");23 $page->setConfig(‘next‘,‘下一页‘);24 $page->setConfig(‘first‘,‘首页‘);25 $page->setConfig(‘last‘,‘末页‘);26 27 $show=$page->show(); //显示分页（必写）28 29 $this->assign(‘select‘,$data); //查询数据渲染模板30 31 $this->assign(‘page‘,$show); //渲染分页table32 33 $this->display(); //显示面板34 }
3：添加模板（html表）：
1 <table class="table" border="1" style="width:100%;border-collapse:collapse;border:2px solid #000;text-align:center;"> 2 <tr> 3 <th>系统ID</th> 4 <th>用户ID</th> 5 <th>信息</th> 6 <th>信息发布时间</th> 7 <th>操作数</th> 8 </tr> 9 10 <foreach name=‘select‘ item=‘b‘> <-- 后台的 $this->assign(‘select‘,$data); 的查询数据-->11 <tr>12 <td>{$b.id}</td>13 <td>{$b.uid}</td>14 <td>{$b.msg}</td> 15 <td>{$b.msgtime}</td>16 <td>{$b.userfeedback}</td> 17 </tr>18 </foreach>19 <tfoot> <-- 必须有 tfoot 用于显示分页脚标 -->20 <tr style="background-color:#000;color:#ffffff;">21 <td colspan=‘5‘ align=‘right‘>22 {$page}23 </td>24 </tr>25 </tfoot>26 </table>
4：效果：
参考链接：http://blog.163.com/john_pei/blog/static/2046000172014270125286/
http://www.thinkphp.cn/info/192.html
http://blog.csdn.net/xiaojun1288/article/details/6861501
Table 分页处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。