所属分类:PHP实例-Ajax,常用实例教程
HTML
<table id="tables" class="table table-striped table-bordered table-hover"> <thead> <tr> <th>用户</th> <th>内容</th> <th>时间</th> </tr> </thead> <tbody> </tbody> </table>
引入jQuery和dataTables相关插件
<script src="js/jquery.js"></script> <script src="js/jquery.dataTables.min.js"></script> <script src="js/jquery.dataTables.bootstrap.js"></script>
jQuery
var datatables = $('#tables').dataTable({//http://www.cnblogs.com/flycrosscloud/p/3662929.html?utm_source=tuicool "bServerSide": true, 'bPaginate': true, //是否分页 "bProcessing": true, //datatable获取数据时候是否显示正在处理提示信息。 "iDisplayLength": 10, //每页显示10条记录 'bFilter': true, //是否使用内置的过滤功能 "sAjaxSource": 'ajax.php', "aaSorting": [ [0, "desc"], ], "aoColumns": [ {"mData": "id", "bSortable": true, "bSearchable": true, "sWidth": "250px"}, {"mData": "name", "bSortable": true, "bSearchable": true}, {"sWidth": "220px", "mData": "addtime", "bSortable": true, "mRender": function(data, type, full) { return "<a onclick='getTimes()' >" + data + "</a>"; } } ], "oLanguage": { 'sSearch': '数据筛选:', "sLengthMenu": "每页显示 _MENU_ 项记录", "sZeroRecords": "没有符合项件的数据...", "sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据;总共有 _TOTAL_ 项记录", "sInfoEmpty": "显示 0 至 0 共 0 项", "sInfoFiltered": "(_MAX_)" }, });
dataTable相关API
参数 | 描述 | 默认值 |
destroy | DataTable销毁事件,调用fnDestroy时触发。 | 1、e,event,jquery事件对象 2、o:object,DataTable设置对象 |
draw | 页面中表重绘时触发。也可以给fnDrawCallback指定回调函数来绑定此事件。 | 同上 |
filter | 应用到表的过滤条件发生改变时触发。 | 同上 |
init | DataTable初始化完成事件,当表完成渲染、装载数据后触发。 | 1、2同上 3、json,对象,从服务端获取的JSON对象。 |
page | 页面改变事件,当表的当前分页发生变化是触发 | 1、2同上 |
processing | 正在处理事件,(未测试成功,以下内容为个人理解),当DataTalbe执行一些比较耗时的动作时触发(如排序、过滤)。可以用来通知用户DataTable正在执行某个动作,或者某个操作已经完成。 | 1、2同上 3、bShow:boolean,DataTable是否正在执行动作标记 |
sort | 排序事件,表的排序条件发生变化时触发。 | 1、2同上 |
stateLoaded | 状态载入完成事件。当状态信息已经从本地存储中载入同时配置对象内容也按照载入数据修改完成时触发。 | 1、2同上 3、json:object,保存在客户端的状态信息。 |
stateLoadParams | 状态载入时事件。当状态信息已经从本地存储中载入但配置对象内容还未按照载入数据修改时触发。 | 同上 |
stateSaveParams | 状态保存事件,当表的状态发生变化,需要重新保存状态信息时触发。 | 1、2同上 3、json:object,将要被保存的状态信息。 |
xhr | Ajax事件,当一个服务端Ajax请求完成时触发(注意,这个事件处理程序由fnServerData调用,如果改写了fnServerData,需要在你自己的success函数中手动触发这个事件)。 | 1、2同上 3、json:object,从服务端返回的JSON对象。 |