码迷,mamicode.com
首页 > 其他好文 > 详细

Table 分页处理

时间:2015-01-07 00:33:13      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

  介绍两种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

 

Table 分页处理

标签:

原文地址:http://www.cnblogs.com/cj8988/p/4207126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!