在使用Datatables插件创建可进行自定义灵活分类查询的表格时,需要关闭自带的搜索框、分页栏等,可以参考官方文档做出如下设置:

例我们有一个下列表格实例:

<table class="all-ssl-table">
<tbody>
  <tr>
     <td>TrustOcean DV SSL Certificate</td>
     <td>$5.15</td>
     <td>$9.15</td>
  </tr>
  <tr>
     <td>TrustOcean Wildcard SSL Certificate</td>
     <td>$35.15</td>
     <td>$59.15</td>
  </tr>
</tbody>
</table>

使用 Datatables 进行配置:

var table = $('.all-ssl-table').DataTable({
    "searching" : false, //去掉搜索框方法一
    "bFilter": false,   //去掉搜索框方法二
    "bSort": false,  //禁止排序
    "paging": false,   //禁止分页
    "info": false   //去掉底部文字
});

又因我们项目需要,需要启用搜索和Filter功能,且不需要展示搜索框,因此我们做出了如下改动:

table = $('.all-ssl-table').DataTable({
    "searching" : true, //开发搜索
    "bFilter": true,   //开启规则搜索
    "bSort": false,  //禁止排序
    "paging": false,   //禁止分页
    "info": false   //去掉底部文字
});

然后我们增加了一段 css 代码来隐藏搜索框:

<style type="text/css">
    .dataTables_filter{
        display: none;
    }
</style>

如果想查询更多关于 Datatables 的 API 文档,您可以参考官方文档 https://datatables.net/manual/api

标签: datatables

添加新评论