0.3.7 • Published 4 years ago
datatables-searchheader v0.3.7
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.