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

<script src="extensions/select2-filter/bootstrap-table-select2-filter.js"></script>

Options

filter

• type: Boolean
• description: enabled select2 filter exetension.
• default: false

filterValues

• type: Object
• description: Set default selected value.
  Example: {columnA.field.:'Column A Selected Value',columnB.field:'Column B Selected Value'}
• default: undefined

filterTemplate

• type: Object
• description: 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
• description: 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)
• 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'});