首页>>分页>>PHP+Ajax+dataTables无刷新分页演示(2016-04-27)

PHP+Ajax+dataTables无刷新分页演示

PHP+Ajax+dataTables无刷新分页演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.                     var datatables = $('#tables').dataTable({  
  3.                         "bServerSide": true,  
  4.                         'bPaginate': true, //是否分页  
  5.                         "bProcessing": true, //datatable获取数据时候是否显示正在处理提示信息。  
  6.                         "iDisplayLength": 2, //每页显示10条记录  
  7.                         'bFilter': true, //是否使用内置的过滤功能  
  8.                         "sAjaxSource": 'ajax.php',  
  9.                         "aaSorting": [  
  10.                             [0, "desc"],  
  11.                         ],  
  12.                         "aoColumns": [  
  13.                             {"mData": "name", "bSortable": true, "bSearchable": true, "sWidth": "250px"},  
  14.                             {"mData": "message", "bSortable": true, "bSearchable": true},  
  15.                             {"sWidth": "220px", "mData": "updatetime", "bSortable": true, "mRender": function(data, type, full) {  
  16.                                     return "" + data + "";  
  17.                                 }  
  18.                             }  
  19.                         ],  
  20.                         "oLanguage": {  
  21.                             'sSearch': '数据筛选:',  
  22.                             "sLengthMenu": "每页显示 _MENU_ 项记录",  
  23.                             "sZeroRecords": "没有符合项件的数据...",  
  24.                             "sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据；总共有 _TOTAL_ 项记录",  
  25.                             "sInfoEmpty": "显示 0 至 0 共 0 项",  
  26.                             "sInfoFiltered": "(_MAX_)"  
  27.                         },  
  28.                     });  
  29.                       
  30.         </script>    
XML/HTML Code
  1. <div class="table-responsive">  
  2.                    <table id="tables" class="table table-striped table-bordered table-hover">  
  3.                        <thead>  
  4.                            <tr>  
  5.                                <th>用户</th>  
  6.                                <th>内容</th>  
  7.                                <th>时间</th>  
  8.                            </tr>  
  9.                        </thead>  
  10.                        <tbody>  
  11.                        </tbody>  
  12.                    </table>  
  13.                </div>  

 


原文地址:http://www.freejs.net/article_fenye_553.html