Column Visibility with Custom Search Fields

Question

I am trying to create a datatable with custom search and column visibility.

What I have done is -

HTML

    


        
                      

              相关标签:
       
      

Answer 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><input type="text" id="0"  class="employee-search-input"></td>
        <td><input type="text" id="1" class="employee-search-input"></td>
        <td><input type="text" id="2" class="employee-search-input" ></td>
        <td><input type="text" id="3" class="employee-search-input" ></td>
        <td><input type="text" id="4" class="employee-search-input" ></td>
        <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
        <td><input type="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.