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>
View Code

 

    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         }
View Code

　　

　　　注：　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 }
View Code

 

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);       //渲染分页table
32     
33         $this->display();         //显示面板
34     }
View Code

  　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>
View Code

 

 　　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

 

posted @ 2015-01-06 23:08  Foto_CShow  阅读(1763)  评论(0)  编辑  收藏  举报