datatables-searchheader
v0.3.7
Published
jQuery plugin to generate search header for DataTables with various types of search fields.
Downloads
24
Readme
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.