Table Filter Control

Table Filter Control extension of Bootstrap Table.

Dependence if you use the datepicker option: bootstrap-datepicker v1.4.0

Usage

<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

Example

Filter Control

Options

filterControl

  • type: Boolean

  • Detail:

    Set true to add an input or select into the column.

  • Default: false

filterDataCollector

  • type: Function

  • Detail:

    Collect data which will added to the select filter, to filter through e.g. labels which are comma separated and displayed with a formatter.

  • Default: undefined

alignmentSelectControlOptions

  • type: String

  • Detail:

    Set the alignemnt of the select control options. Use Use left, right or auto.

  • Default: undefined

hideUnusedSelectOptions

  • type: Boolean

  • Detail:

    Set to true in order to hide the options that are not in the table. This option does not work on server-side pagination.

  • Default: false

disableControlWhenSearch

  • type: Boolean

  • Detail:

    Set to true if you want to disable the control while the server is responding the data. This options will work if the sidePagination is ‘server’.

  • Default: false

searchOnEnterKey

  • type: Boolean

  • Detail:

    Set to true to fire the search action when the user press the enter key.

  • Default: false

Column options

filterControl

  • type: String

  • Detail:

    Set input: show an input control, select: show a select control, datepicker: show a datepicker control.

  • Default: undefined

filterData

  • type: String

  • Detail:

    Set custom select filter values, use var:variable to load from a variable or url:http://www.example.com/data.json to load from a remote json file or json:{key:data} to load from a json string.

  • Default: undefined

filterDefault

  • type: String

  • Detail:

    Set the default value of the filter.

  • Default: undefined

filterDatepickerOptions

  • type: Object

  • Detail:

    If the datepicker option is set use this option to configure the datepicker with the native options. Use this way: data-filter-datepicker-options='{"autoclose":true, "clearBtn": true, "todayHighlight": true}'.

  • Default: undefined

filterStrictSearch

  • type: Boolean

  • Detail:

    Set to true if you want to use the strict search mode.

  • Default: false

filterStartsWithSearch

  • type: Boolean

  • Detail:

    Set to true if you want to use the starts with search mode.

  • Default: false

filterControlPlaceholder

  • type: String

  • Detail:

    Set this in order to show a placeholder only in the input filter control.

  • Default: ''

filterOrderBy

  • type: String

  • Detail:

    Set this to order the options in a select control whether ascending or descending.

  • Default: 'asc'

Icons

  • clear: ‘glyphicon-trash icon-clear’

Locale

formatClearFilters

  • type: Function

  • Default: function () { return "Clear Filters";}

Events

onColumnSearch(column-search.bs.table)

  • Fired when we are searching into the column data

onCreatedControls(created-controls.bs.table)

  • Fired when we are searching into the column data

Methods

triggerSearch

  • Trigger manually the search action

clearFilterControl

  • Clear all the controls added by this plugin (similar to showSearchClearButton option).