[插件]datatables，一款强大的基于jquery的表格插件

datatables插件可以根据项目开发需要设置不同的参数属性选项（查看datatables的属性），详细的手册请访问官网（http://datatables.net/）参阅，久久经验网仅把在实际项目开发常用的方法供大家参考。

$("#datatable").dataTable({//table的id 
    "data":jsonData,//引入json数据对象 
    "columns":[ 
        {"data": 'name',"sTitle":'姓名',"sClass":'fb center'},//sClass自定义样式 
        {"data": 'age',"sTitle":'年龄'}, 
        {"data": 'love',"sTitle":'爱好'}, 
        {"data": 'email',"sTitle":'Email'}, 
        {"data": 'tel',"sTitle":'电话'}, 
        {"data": 'qq',"sTitle":'QQ'}, 
        //插入一个操作列 
        { 
            "sTitle":'操作', 
            "mDataProp": "id", 
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {//参数：DOM, id, object对象, 当前所在行,当前所在列 
                $(nTd).addClass('center').html('编辑  '+
'删除');//oData.id,获取json对象里的id 
            } 
        },           
    ], 
    "bPaginate": true, //翻页功能 
    "bLengthChange": true, //改变每页显示数据数量 
    "bFilter": true, //过滤功能 
    "bSort": true, //排序功能 
    "bInfo": true,//页脚信息 
    "bAutoWidth": true,//自动宽度 
    //"iDisplayLength": 20,//默认显示的记录数 
    //"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序   
    "oLanguage": { 
        //"sUrl":"language.txt",//读取语言包 
        "sLengthMenu": "每页显示 _MENU_ 条", 
        "sZeroRecords": "没有找到符合条件的数据", 
        "sProcessing": "正在获取数据，请稍后…", 
        "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", 
        "sInfoEmpty": "没有检索到数据", 
        "sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
        "sSearch": "搜索：", 
        "oPaginate": { 
            "sFirst": "首页", 
            "sPrevious": "前一页", 
            "sNext": "后一页", 
            "sLast": "尾页" 
        } 
    }, 
    //"sPaginationType":"full_numbers",//分页样式 
    "sDom":'<"top"fl<"clearfix">>rt<"bottom"ip<"clearfix">>', 
    //"bStateSave": true,//开启cookie(缺省false) 
    "aoColumnDefs": [//参数作用：屏蔽由于json中不存在指定字段抛出的错误警告提示 
        { 
            "sDefaultContent": '',//当没有相关数据时 
            "aTargets": [ '_all' ] 
            //"sVisible":false//此列不显示 
        } 
    ] 
}); 

当然，基于jquery的datatables插件其功能不止于这些，还有更多功能需要我们去挖掘！

datatables官网是**的，**目前也有人在翻译，中文版：http://dt.thxopen.com/index.html（有些demo还在完善中…）。

对datatables感兴趣却不清楚datatables的使用方法？别急，欢迎加群讨论（239274519）或在线留言。

原创文章转载请注明出处！原文链接：https://www.exp99.com/jswz/f2e/datatables.html

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。