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=" 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="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