bootstrap-table/site/docs/extensions/select2-filter.md

---

layout: docs title: Table Select2 Filter description: Table Select2 Filter extension of Bootstrap Table. group: extensions

toc: true

Use Plugin: bootstrap-table-select2-filter

Dependence if you use the select2 option: Select2 v4.0.0 upper

Usage

{% highlight html %} {% endhighlight %}

Options

filter

• type: Boolean

• Detail:

enabled select2 filter exetension.

• Default: false

filterValues

• type: Object

• Detail:

Set default selected value.
Example: {columnA.field.:'Column A Selected Value',columnB.field:'Column B Selected Value'}

• Default: undefined

filterTemplate

• type: Object

• Detail:

customize default filter template.
Example: {   input: function (bootstrapTable, column, isVisible) {   return '<input type="text" class="form-control input-sm" data-filter-field="' + column.field + '" style="width: 100%; visibility:' + isVisible + '">';

      }

Column options

filter

• type: Object

• Detail:

Set filter option to configure the filter.
Example: {type:'select', data:["itemA", "itemB", "itemC"]}

* type: default support adding `input` or `select` into the column.
* data: need to set when type is `select` , filter data list. (The same as [Select2 Options](http://select2.github.io/examples.html#data))

• Default: undefined
• customize filter: filter: {  template: // HTML String or jQuery Object,  setFilterValue: function ($filter, field, value) {
    // set template default value.  } }

Methods

setSelect2Data

• Set column's filter data.
  • Parameters
    • String : column field.
    • Object : filter data list.
  • Example: $table.bootstrapTable("setSelect2Data", "columnA.filed", ["itemA", "itemB", "itemC"]);

setFilterValues

• Parameters
  • Object : column field / default value.
• Example: $table.bootstrapTable("setFilterValues", {columnA.field.:'Column A Selected Value',columnB.field:'Column B Selected Value'});