Skip to content Skip to sidebar Skip to footer

Column Visibility With Custom Search Fields

I am trying to create a datatable with custom search and column visibility. What I have done is - HTML

Solution 1:

SOLUTION

You're using two thead elements, make it one with two rows instead as shown below.

<thead><tr><th>Employee name</th><th>Salary</th><th>Position</th><th>City</th><th>Extension</th><th>Joining date</th><th>Age</th></tr><tr><td><inputtype="text"id="0"class="employee-search-input"></td><td><inputtype="text"id="1"class="employee-search-input"></td><td><inputtype="text"id="2"class="employee-search-input" ></td><td><inputtype="text"id="3"class="employee-search-input" ></td><td><inputtype="text"id="4"class="employee-search-input" ></td><tdvalign="middle"><inputreadonly="readonly"type="text"id="5"class="employee-search-input datepicker" ></td><td><inputtype="text"id="6"class="employee-search-input" ></td></tr></thead>

Also in this case you need to use orderCellsTop: true option to tell DataTables to use top row for sorting.

DEMO

See this jsFiddle for code and demonstration.

Post a Comment for "Column Visibility With Custom Search Fields"