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：建表：

　　

  <table style="width: 100%; margin-bottom:8px; " class="dataTables_wrapper table" id="tablemsg">
                 <thead style="font-size: 15px; font-weight: 800; background-color: #E7E5DA;">
                     <tr>
                         <td>用户ID</td>
                         <td>反馈问题</td>
                         <td>设备类型</td>
                         <td>应用版本</td>
                         <td>系统版本</td>
                         <td>反馈时间</td>
                         <td>最后回复</td>
                     </tr>
                 </thead>
                 <tbody id="tablelise" style="table-layout: fixed; word-wrap: break-word;">
                     <tr>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>
                 </tbody>
             </table>

3：js插入数据：

 function showGcmList() {

             var datable = $('#tablemsg').dataTable({ "bDestroy": true});
             datable.fnClearTable();

             for (var i = 0; i < data.length; i++) {

                 $tr = $('<tr>' +
                        '<td>' + data[i].userid + '</td>' +
                        '<td>' + msg + '</td>' +
                         '<td >' + data[i].devicetype + '</td>' +
                         '<td >' + data[i].appver + '</td>' +
                         '<td >' + data[i].osver + '</td>' +
                         '<td >' + data[i].msgtime + '</td>' +
                         '<td>'+ data[i].id + '</td>' +
              '</tr>')

                 $('#tablelise').append($tr);
             }
             $("#tablelise tr:odd").addClass("tabEven");
             tableui();
         }

　　

　　　注：　var datable = $('#tablemsg').dataTable({ "bDestroy": true});    datable.fnClearTable();   是对table中的数据清空（同$('#tablelise').empty();）.

4：tableui() 函数就是对table表的渲染（每个属性，下面会有详细介绍）：

 function tableui() {

 　　　　$(function () {
 　　　　$("#tablemsg").dataTable({ //表的ID
 　　　　"bDestroy": true,

 　　　　"bPaginate": true, //开关，是否显示分页器
 　　　　"bJQueryUI": false, //开关，是否启用JQueryUI风格
 　　　　"bAutoWidth": false, //自适应宽度
 　　　　"bFilter": true,         //是否显示模糊查询
 　　　　"bProcessing": false,
 　　　　"bStateSave": true,     //是否开启cookie，当需要对table的数据处理后，依然停留在该页数据。
 　　　　"bSort": true,              //是否排序
 　　　　"bLengthChange": true, //开关，是否显示每页大小的下拉框
 　　　　"aLengthMenu": [30, 50, 60],//下拉框的值
 　　　　"iDisplayLength": 30,  //下拉框的初始值

 　　　　"aaSorting": [[5, "desc"]],      //当bSort为true是起作用，即table的第6行按降序排。
 　　　　"sPaginationType": "full_numbers", //table脚标显示
 　　　　"aoColumns": [                           //每列的宽度（可省略）
 　　　　　　{ sWidth: '80px' },
 　　　　　　{ sWidth: '23%' },
 　　　　　　{ sWidth: '80px' },
 　　　　　　{ sWidth: '80px' },
 　　　　　　{ sWidth: '80px' },
 　　　　　　{ sWidth: '100px' },
 　　　　　　{ sWidth: '23%' },　　　　　
 　　　　],

 　　　　"oLanguage": {
 　　　　"sProcessing": "正在加载中......",
 　　　　"sLengthMenu": "每页显示 _MENU_ 条记录",
 　　　　"sZeroRecords": "对不起，查询不到相关数据！",
 　　　　"sEmptyTable": "表中无数据存在！",
 　　　　"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
 　　　　"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
 　　　　"sSearch": "模糊搜索",
 　　　　"oPaginate": {
 　　　　"sFirst": "首页",
 　　　　"sPrevious": "上一页",
 　　　　"sNext": "下一页",
 　　　　"sLast": "末页"
 　　　　}
 　　　　}
 　　});
 　　});
 }

5：效果：

"bFilter" : true 属性是否显示搜索：    

"bLengthChange": true  属性是否显示每页的显示值：   其中 aLengthMenu 的值为下拉框的各个值，iDisplayLength  为初始值。

"sPaginationType": "full_numbers"  属性设置分页脚的显示样式  

最终显示效果：

　　  二：PHP分页（ThinkPHP）：

　　1：准备分页类文件 Page.class.php  (类位于  /ThinkPHP/Library/Org/Util/ 文件夹下，如果没有，可在网上下载)。

　　2：后台PHP代码  function showTable（）：

     function showTable(){
         $table = M ( 'msg', '', 'DB_CONFIG' );
         if(isset($_GET['p'])){
             $p=$_GET['p'];

         }else{
             $p=1;
         }

         import("Org.Util.Page");//加载分页类

         $countaql='select count(1) as count from fb_msg_android where userfeedback <> 0';
         $count = $table->query($countaql);   //查询数据

         $page=new \Page(intval($count[0]['count']),8);    //第一个参数是 数据总数，第二个参数是  每页显示的数据个数

         $sqlstrmsg="select * from fb_msg_android where userfeedback <> 0 limit $page->firstRow,$page->listRows";
         $data = $table->query($sqlstrmsg);      //查询数据，从第一条到第8条

         $page->setConfig('header','条记录');    //分页脚标设置
         $page->setConfig('prev',"上一页");
         $page->setConfig('next','下一页');
             $page->setConfig('first','首页');
         $page->setConfig('last','末页');

         $show=$page->show();        //显示分页（必写）

         $this->assign('select',$data);    //查询数据渲染模板

         $this->assign('page',$show);       //渲染分页table

         $this->display();         //显示面板
     }

　3：添加模板（html表）：

 <table class="table" border="1" style="width:100%;border-collapse:collapse;border:2px solid #000;text-align:center;">
         <tr>
             <th>系统ID</th>
             <th>用户ID</th>
             <th>信息</th>
             <th>信息发布时间</th>
             <th>操作数</th>
         </tr>

         <foreach name='select' item='b'>   <-- 后台的 $this->assign('select',$data); 的查询数据-->
             <tr>
                 <td>{$b.id}</td>
                 <td>{$b.uid}</td>
                 <td>{$b.msg}</td>
                 <td>{$b.msgtime}</td>
                 <td>{$b.userfeedback}</td>
             </tr>
         </foreach>
         <tfoot>                                <-- 必须有 tfoot 用于显示分页脚标 -->
             <tr style="background-color:#000;color:#ffffff;">
                 <td colspan='5' align='right'>
                     {$page}
                 </td>
             </tr>
         </tfoot>
     </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