Посмотреть на GitHub

Table Filter Control

Расширение для управления фильтрацией Bootstrap Table, добавляет функцию фильтрации для столбцов таблицы.

На этой странице

Расширение для управления фильтрацией позволяет добавлять поля ввода или раскрывающиеся списки для каждого столбца таблицы, что позволяет пользователям быстро фильтровать данные и повышает эффективность запросов данных.

Использование

<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>

Примеры

Filter Control

Опции

filterControl

  • Атрибут: data-filter-control

  • Тип: Boolean

  • Описание:

    Включать ли функцию фильтрации столбцов. При установке в true автоматически добавляет поля ввода или раскрывающиеся списки для столбцов таблицы.

  • Значение по умолчанию: false

filterControlVisible

  • Атрибут: data-filter-control-visible

  • Тип: Boolean

  • Описание:

    Отображать ли элементы управления фильтрацией. При установке в false скрывает все элементы ввода фильтрации, но функция фильтрации остаётся активной.

  • Значение по умолчанию: true

alignmentSelectControlOptions

  • Атрибут: data-alignment-select-control-options

  • Тип: String

  • Описание:

    Устанавливает выравнивание опций в раскрывающемся списке. Доступные значения: left (по левому краю), right (по правому краю) или auto (автоматическое выравнивание).

  • Значение по умолчанию: undefined

filterControlContainer

  • Атрибут: data-filter-control-container

  • Тип: Selector

  • Описание:

    Указывает селектор контейнера для элементов управления фильтрацией. Например, при установке #filter все элементы управления фильтрацией будут отображаться в элементе с id filter.

    Каждый элемент фильтрации в контейнере (input или select) должен содержать имя класса bootstrap-table-filter-control-<FieldName>, где <FieldName> нужно заменить на значение атрибута field соответствующего столбца.

  • Значение по умолчанию: false

filterDataCollector

  • Атрибут: data-filter-data-collector

  • Тип: Function

  • Описание:

    Функция сбора данных, используемая для сбора данных опций, добавляемых в раскрывающийся список фильтрации. Часто используется для обработки данных тегов, отображаемых через formatter (например, список тегов, разделённых запятыми).

  • Значение по умолчанию: undefined

filterControlMultipleSearch

  • Атрибут: data-filter-control-multiple-search

  • Тип: bool

  • Описание:

    Включать ли функцию множественного поиска. При установке в true пользователи могут искать несколько значений в одном поле ввода.

    Несколько значений поиска разделяются разделителем, который можно настроить с помощью опции filterControlMultipleSearchDelimiter.

  • Значение по умолчанию: false

filterControlMultipleSearchDelimiter

  • Атрибут: data-filter-control-multiple-search-delimiter

  • Тип: String

  • Описание:

    Определяет разделитель, используемый для разделения значений поиска.

  • Значение по умолчанию: ,

filterControlSearchClear

  • Атрибут: data-filter-control-search-clear

  • Тип: bool

  • Описание:

    Включать ли функцию очистки поиска. При установке в true в сочетании с опцией таблицы showSearchButton можно одним щелчком очистить все условия фильтрации.

  • Значение по умолчанию: true

searchOnEnterKey

  • Атрибут: data-search-on-enter-key

  • Тип: Boolean

  • Описание:

    При установке в true поиск запускается при нажатии клавиши Enter.

  • Значение по умолчанию: false

showFilterControlSwitch

  • Атрибут: data-show-filter-control-switch

  • Тип: Boolean

  • Описание:

    При установке в true отображает кнопку переключения элементов управления фильтрацией.

  • Значение по умолчанию: false

sortSelectOptions

  • Атрибут: data-sort-select-options

  • Тип: Boolean

  • Описание:

    При установке в true сортирует опции в раскрывающемся списке.

  • Значение по умолчанию: false

Опции столбцов

filterControl

  • Атрибут: data-filter-control

  • Тип: String

  • Описание:

    Устанавливает тип элемента управления фильтрацией для этого столбца:

    • input: текстовое поле ввода
    • select: раскрывающийся список
    • datepicker: средство выбора даты HTML5

  • Значение по умолчанию: undefined

filterControlPlaceholder

  • Атрибут: data-filter-control-placeholder

  • Тип: String

  • Описание:

    Устанавливает текст заполнителя для поля ввода. Действует только если тип элемента управления — input.

  • Значение по умолчанию: ''

filterCustomSearch

  • Атрибут: data-filter-custom-search

  • Тип: function

  • Описание:

    Функция пользовательского поиска, заменяющая встроенный поиск. Параметры:

    • text: текст поиска.
    • value: значение столбца для сравнения.
    • field: имя поля столбца.
    • data: данные таблицы.

    Возврат false означает фильтрацию текущей строки/столбца; возврат true означает сохранение; возврат null означает пропуск пользовательского поиска для текущего значения.

  • Значение по умолчанию: undefined

filterData

  • Атрибут: data-filter-data

  • Тип: String

  • Описание:

    Устанавливает пользовательские данные раскрывающегося списка фильтрации, поддерживает: var:variable загрузка из переменной; obj:variable.key загрузка из объекта; url:http://www.example.com/data.json загрузка из удалённого JSON-файла; json:{key:data} загрузка из JSON-строки; func:functionName загрузка из возвращаемого значения функции.

  • Значение по умолчанию: undefined

filterDatepickerOptions

  • Атрибут: data-filter-datepicker-options

  • Тип: Object

  • Описание:

    При использовании средства выбора даты через эту опцию передаются нативные настройки, например: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. Подробнее в официальной документации.

  • Значение по умолчанию: undefined

filterDefault

  • Атрибут: data-filter-default

  • Тип: String

  • Описание:

    Устанавливает значение по умолчанию для фильтра.

  • Значение по умолчанию: undefined

filterOrderBy

  • Атрибут: data-filter-order-by

  • Тип: String

  • Описание:

    Устанавливает порядок сортировки опций раскрывающегося списка: по возрастанию ('asc'), по убыванию ('desc') или в порядке, возвращённом сервером ('server').

  • Значение по умолчанию: 'asc'

filterStartsWithSearch

  • Атрибут: data-filter-starts-with-search

  • Тип: Boolean

  • Описание:

    При установке в true включает режим поиска “по префиксу”.

  • Значение по умолчанию: false

filterStrictSearch

  • Атрибут: data-filter-strict-search

  • Тип: Boolean

  • Описание:

    При установке в true включает режим точного совпадения поиска.

  • Значение по умолчанию: false

Иконки

  • clear: 'glyphicon-trash icon-clear'
  • filterControlSwitchHide: 'glyphicon-zoom-out icon-zoom-out'
  • filterControlSwitchShow: 'glyphicon-zoom-in icon-zoom-in'

События

onColumnSearch (column-search.bs.table)

  • Срабатывает при запуске поиска данных столбца.

onCreatedControls (created-controls.bs.table)

  • Срабатывает при завершении создания элементов управления фильтрацией.

Методы

triggerSearch

  • Вручную запускает операцию поиска.

clearFilterControl

  • Очищает все элементы управления, добавленные этим плагином (аналогично опции showSearchClearButton).

toggleFilterControl

  • Переключает отображение/скрытие элементов управления фильтрацией.

Локализация

formatClearFilters

  • Тип: Function

  • Значение по умолчанию: function () { return "Clear Filters" }

formatFilterControlSwitch

  • Тип: Function

  • Значение по умолчанию: function () { return "Hide/Show controls" }

formatFilterControlSwitchHide

  • Тип: Function

  • Значение по умолчанию: function () { return "Hide controls" }

formatFilterControlSwitchShow

  • Тип: Function

  • Значение по умолчанию: function () { return "Show controls" }