This is an extension for Bootstrap table jquery plugin, based on another extension Table Filter Control, which give columns filter controls for server side and client side.
Select2 - v.3 for select filter control jQuery UI - v.1.10 for datepicker filter control
Include jQuery, Bootstrap, Bootstrap-table and then Bootstrap-table filter
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css">
<link rel="stylesheet" href="../dist/bootstrap-table-filter.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
<script src="../dist/bootstrap-table-filter.min.js"></script>
Then u can enable filter via html
<table id="itemsTable" class="table"
data-toggle="table"
data-url="../json/data.json"
data-height="500"
data-filter="true">
<thead>
<tr>
<th data-field="ItemId" data-sortable="true" data-align="center">ItemId</th>
<th data-field="ItemName" data-sortable="true" data-align="left" data-filter-type="input">ItemName</th>
<th data-field="ItemStatus" data-sortable="true" data-align="left" data-width="320" data-filter-type="select" data-filter-data="var:ItemStatuses">ItemStatus</th>
</tr>
</thead>
</table>
or u can enable filter via javascript
<table id="itemsTable" class="table">
</table>
<script type="javascript">
var $itemsTable = $('#itemsTable'),
itemStatuses = [{ id: 1, text: 'Text1' }, { id: 2, text: 'Text2' }];
$(document).ready(function () {
$itemsTable.bootstrapTable({
url: '../json/data.json',
height: 500,
filter: true,
columns: [
[
{
title: 'ItemID',
field: 'ItemID',
sortable: true,
align: 'center'
},
{
title: 'ItemName',
field: 'ItemName',
sortable: true
align: 'left',
filterType: 'input'
},
{
title: 'ItemStatus',
field: 'ItemStatus',
sortable: true
align: 'left',
filterType: 'select',
filterSelectData: 'var:itemStatuses'
}
]
]
});
});
</script>
- type: Boolean
- description: Set true to add filters on columns.
- default:
false
- attribute:
data-filter
- type: String
- description: Set filter control in column
- values:
input
,select
,datepicker
,input_range
,select_range
,datepicker_range
- default:
undefined
- attribute:
data-filter-type
- type: String
- description: Set datasource for select filter control
- values:
var:someArrayOfObjects
,url:someUrlForAjax
- default:
undefined
- attribute:
data-filter-data
- type: Boolean
- description: Set searchable option on select2 plugin for select controls
- default:
false
- attribute:
data-filter-select-searchable
- type: Boolean
- description: Set disabled on filter control
- default:
false
- attribute:
data-filter-disabled
- type: Object
- description: Set options for initialize datepicker filter control
- default:
{ dateFormat: 'dd.mm.yy' }
- attribute:
data-filter-datepicker-options
- type: Boolean
- description: Set strict search
- default:
false
- attribute:
data-filter-strict-search
filter
: 'fa-filter icon-filter'resetFilter
: 'fa-remove icon-reset-filter'
By default ['en-US'] locale
formatFilterDatepickerPlaceholder
: 'dd.mm.yyyy'formatFilterDatepickerPlaceholderFrom
: 'from dd.mm.yyyy'formatFilterDatepickerPlaceholderTo
: 'to dd.mm.yyyy'formatFilter
: 'Start filter'formatResetFilter
: 'Reset filter'
- event name:
column-search.bs.table
- description: Fired when we are searching into the column data