删除数据表搜索字段而不禁用可搜索

Question

我在 Angular5 中使用 angular-datatables 创建了一个数据表。然后，我创建了表格页脚并实现了输入字段以单独搜索每一列，并将style="display: table-header-group;" 添加到页脚，使其位于页眉上方。

现在我想删除标准数据表搜索输入字段。 如果我只是在数据表配置中禁用它，那么自定义搜索字段将不起作用。 我还尝试将类 dataTables_filter 的值更改为 display: none，但它不起作用，因为它是从 node_modules 文件夹中获取的样式。

我可以更改我的 node_modules/datatables/style.css，但问题是，这是 gitignore 列表中唯一的文件夹，并且不会转到我们的存储库。

这是我的代码： HTML：

<tfoot style="display: table-header-group;">
    <tr>
      <th style="width: 25%">

      </th>
      <th style="width: 25%">

      </th>
      <th style="width: 25%">
        <input type="text" placeholder="Search actions" name="search-actions" class="form-control" />
      </th>
      <th style="width: 25%">
        <input type="text" placeholder="Search messages" name="search-messages" class="form-control" />
      </th>
    </tr>        
  </tfoot>

打字稿：

ngOnInit(): void {
    this.dtOptions = {
      ajax: 'http://www.mocky.io/v2/5b0eb2083200006300c19bd8',
      columns: [{
        title: 'Date',
        data: 'date'
      }, {
        title: 'Time',
        data: 'time'
      }, {
        title: 'Action',
        data: 'action'
      }, {
        title: 'Message',
        data: 'message'
      }]
    };
  }

  ngAfterViewInit(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.columns().every(function () {
        const that = this;
        $('input', this.footer()).on('keyup change', function () {
          if (that.search() !== this['value']) {
            that
              .search(this['value'])
              .draw();
          }
        });
      });
    });
  }

Answer 1

使用dom 选项并从默认值中排除f（默认样式为lfrtip）以隐藏过滤控制。

例如：

this.dtOptions = {
   // ... skipped ...
   dom: 'lrtip'
}