Bootstrap-table filter

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.

References

Select2 - v.3 for select filter control jQuery UI - v.1.10 for datepicker filter control

Usage

Step 1

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>

Step 2

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>

Table options

filter

type: Boolean
description: Set true to add filters on columns.
default: false
attribute: data-filter

Column options

filterType

type: String
description: Set filter control in column
values: input, select, datepicker, input_range, select_range, datepicker_range
default: undefined
attribute: data-filter-type

filterData

type: String
description: Set datasource for select filter control
values: var:someArrayOfObjects, url:someUrlForAjax
default: undefined
attribute: data-filter-data

filterSelectSearchable

type: Boolean
description: Set searchable option on select2 plugin for select controls
default: false
attribute: data-filter-select-searchable

filterDisabled

type: Boolean
description: Set disabled on filter control
default: false
attribute: data-filter-disabled

filterDatepickerOptions

type: Object
description: Set options for initialize datepicker filter control
default: { dateFormat: 'dd.mm.yy' }
attribute: data-filter-datepicker-options

filterStrictSearch

type: Boolean
description: Set strict search
default: false
attribute: data-filter-strict-search

Icons

filter: 'fa-filter icon-filter'
resetFilter: 'fa-remove icon-reset-filter'

Locales

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'

Events

onColumnSearch

event name: column-search.bs.table
description: Fired when we are searching into the column data

hasankadirdemircan / bootstrap-table-filter Goto Github PK

bootstrap-table-filter's Introduction