jquery.datatables使用整理(持续更新中)

jquery.datatables是一款功能非常强大的表格组件,官网URL,在使用过程中的一些常用配置记录如下:

  1. 隐藏列

    1
    2
    3
    4
    5
    6
    7
    8
    "columnDefs": [
    {
    "targets": 0, //第一列
    "visible": false, //是否可见
    "searchable": false //是否支持内存搜索
    }
    ]
  2. 中文设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    $('#xx').DataTable({
    "language" : {
    "lengthMenu" : "每页显示 _MENU_ 条记录",
    "zeroRecords" : "对不起,查询不到任何相关数据",
    "info" : "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
    "infoEmtpy" : "找不到相关数据",
    "infoFiltered" : "数据表中共为 _MAX_ 条记录",
    "processing" : "正在加载中...",
    "search" : "全局搜索",
    "url" : "", // 多语言配置文件,可将language的设置放在一个txt文件中,例:Javascript/datatable/dtCH.txt
    "paginate" : {
    "first" : "第一页",
    "previous" : " 上一页 ",
    "next" : " 下一页 ",
    "last" : " 最后一页 ",
    "jump" : "跳转"
    },
    "aria": {
    "sortAscending" : ": 升序",
    "sortDescending" : ": 降序"
    }
    }
    });
  3. 排序

    注意:如果你发现设置了这个没产生效果,需要关注是否开启了stateSave:true,如果设置了开启保存状态,那你第一次进入浏览器就会使用默认的排序,默认排序设置是[[ 0, ‘asc’ ]],所以你二次/N次打开页面的时候默认是使用浏览器缓存里保存的默认的那个排序方式,这时候你可以清理浏览器缓存,再刷新页面,就会看到你设置的排序方式了。

    1
    2
    3
    $('#example').dataTable({
    "order": [[ 1, 'desc' ]] //设置第二列降序排序;
    });
  4. 自定义列内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $('#example').dataTable( {
    "columnDefs": [
    {
    "render": function ( data, type, row ) {
    return '<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-edit"></i> 编辑</button>;
    },
    "targets": 0
    }
    ]
    } );
  5. 自定义列宽

    1
    2
    3
    4
    5
    6
    7
    8
    "columns": [
    { "data": "sysid", "width":"10%"},
    { "data": "channelid", "width":"10%"},
    { "data": "secerykey" ,"width":"20%"},
    { "data": "domain" ,"width":"15%"},
    { "data": "state" ,"width":"10%"},
    { "data": "sysdesc" ,"width":"35%"}
    ]
  6. 自定义全局搜索

    datatables默认的全局搜索框很占空间,放在Table上面也不好看,我们可以自定义搜索框,然后调用datatables的search API来触发搜索。

    6.1) 首先要隐藏自带的搜索框,注意不是关闭searching,通过设置dom隐藏搜索框:

    1
    "dom" : "rtip", //f:搜索框 l:每页X行

    6.2) 自定义一个搜索框,假如ID为globalSearch,绑定keyup事件:

    1
    2
    3
    4
    $("#globalSearch").on("keyup", function(){
    //table是datatables初始化后的对象 true:启用正则匹配
    table.search($(this).val() , true ).draw();
    });

    6.3) 上面已经可以全局搜索了,但是刷新页面后并没有将上次的搜索值填充到搜索框,这里手动处理下:

    1
    2
    3
    4
    5
    6
    //采用h5的localStorage存储值,key的命名如下参数
    var localTableVals = localStorage.getItem("DataTables_" + tableid + "_" + window.document.location.pathname);
    if(localTableVals){
    localTableVals = $.parseJSON( localTableVals );
    $("#" + searchid).val(localTableVals.search.search); //填充搜索值
    }
坚持原创技术分享,您的支持将鼓励我继续创作!
分享