CODEWITHSUNDEEP
datatablesangular5angular-datatables
user7339086
user7339086

Reputation:

Remove datatables search field without disabling searchable

I made an datatable in Angular5 using angular-datatables. I then created the table footer and implemented input fields to search each column individually, and added style="display: table-header-group;" to the footer so it goes above the header.

Now I want to remove the standard datatables search input field. If i just disable it in datatable configuration, then the custom search fields won't work. I also tried to change value of class dataTables_filter to display: none, but it won't work, since it get's it's styling from node_modules folder.

I could change my node_modules/datatables/style.css but the problem is, that's the only folder that is on the gitignore list, and doesn't go to our repository.

Here is my code: 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();
          }
        });
      });
    });
  }

Upvotes: 1

Views: 2225

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

Use dom option and exclude f from default value (lfrtip for default style) to hide filtering control.

For example:

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

Upvotes: 4

Related Questions