Search and Ordering

joepacelli

Created a datatable with a list of employees. Instead of putting searches at the bottom in the footer I put them in the header.
Only problem is whenever you click into the input to enter your search it also triggers the ordering
This is what is displayed in DEV mode of Chrome
<th class="SearchField sorting sorting_asc" style="text-align: center; width: 159.479px;" tabindex="0" aria-controls="employeetable" rowspan="1" colspan="1" aria-label=": activate to sort column descending" aria-sort="ascending">
::before
<input type="text" style="width: 125px;" placeholder="Search Name">
::after
</th>

If I hover over ::before or ::after you see the following
th.SearchField.sorting.sorting_asc::before
th.SearchField.sorting.sorting_asc::after

How do I get the search input within the header but no trigger the ordering when clicking into it?

kthorngren

The easiest way is to create two header rows; one for sorting and the other for the search inputs. Use orderCellsTop to control where the sorting events are placed. Here is an example:
https://live.datatables.net/saqozowe/1828/edit

Kevin