分类 大前端 下的文章

在使用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

在Bootstrap框架中使用Radio选择项对Datatable表格条目进行筛选过程中,发现在元素上使用默认的js方法监听onclick事件无效，经过网络查询，自 iChecker 官方文档, 可以使用 ifChecked 事件类型并配合Jquery进行监听。

例有如下会被iChecker实例化的元素:

<input type="radio" name="SSLType">

即可使用 ifChecked 进行监听:

$('input').on('ifChecked', function(event){
    alert("触发的事件类型为:"+ event.type)
});

详细可参考官方文档: http://icheck.fronteed.com/#callbacks