Удалить поле поиска в datatables без отключения поиска - PullRequest
Новая
       23

Удалить поле поиска в datatables без отключения поиска

0 голосов
/ 06 июня 2018

Я создал данные в 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>

TypeScript: 

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();
          }
        });
      });
    });
  }

1 Ответ

0 голосов
/ 07 июня 2018

Используйте параметр dom и исключите f из значения по умолчанию (lfrtip для стиля по умолчанию), чтобы скрыть элемент управления фильтрацией.

Например: 

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