最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

PHP+Ajax+bootstrap+dataTables无刷新分页表格插件

来源:http://www.erdangjiade.com/ 二当家的 2015-08-20 22:34浏览(1882)

在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

PHP+Ajax+bootstrap+dataTables无刷新分页表格插件
分类:表单代码 > 表格 难易:高级
查看演示 下载资源: 168

关注微信号获取此Demo视频教程:

下载资源 下载积分: 40 积分

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对象。
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/211.html
评论4
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 3楼
    11-30 18:49
    xinyu2020
    学习一下~感觉不错~
  • 头像 板凳
    10-23 11:36
    qq562140910
    挺好用的++++++++
  • 头像 椅子
    02-14 16:33
    550515349@qq.com
    这个不错啊,挺好用的。功能多一点就好了
  • 头像 沙发
    02-05 15:47
    shanzhashu
    当一个服务端Ajax请求完成时触发
1 2