DataTables SearchHeader

jQuery plugin to generate search header for DataTables with various types of search fields.

Usage

Load the CSS and JS AFTER Datatables.

Add search-header to your DataTables enabled table.

Compatibility

Tested with [https://datatables.net/download/index](DataTables 1.10.5)

Tested with https://datatables.net/extensions/buttons/

Tested with https://datatables.net/extensions/responsive/

Example 1 (Bare Minimal)

<table class="search-header" id="dataTables">
    <thead>
        <tr>
            <th>ID</th>
            <th>Order Number</th>
            <th data-searchable="false" data-sortable="false"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Example 2 (Server Side Table)

<table class="table table-striped table-bordered table-hover" id="dataTables" data-ajax="http://domain.com/ajax" data-processing="true" data-server-side="true">
    <thead>
    <tr>
        <th data-data="id" data-name="order.id">ID</th>
        <th data-data="order_number" data-name="order.order_number">Order Number</th>
        <th data-data="parcel_value" data-name="parcel.value" data-datatable-searchable="false">Parcel Value</th>
        <th data-data="actions" data-searchable="false" data-datatable-sortable="false" data-class-name="dt-center">Actions</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Remarks: data-ajax, data-processing and data-server-side in table level,

and data-data, data-name, data-searchable in column level are native DataTables features.

This plugin respect data-searchable attribute to decide search field should be displayed or not.