Bootstrap Table Filter Control

Extensão Filter Control da tabela Bootstrap Table.

Nesta página

Uso

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

Exemplo

Filter Control

Opções

filterControl

Atributo: data-filter-control
Tipo: Boolean
Detalhe:

Defina como true para adicionar um input ou select na coluna.
Padrão: false

filterControlVisible

Atributo: data-filter-control-visible
Tipo: Boolean
Detalhe:

Defina como false para ocultar os controles de filtro.
Padrão: true

alignmentSelectControlOptions

Atributo: data-alignment-select-control-options
Tipo: String
Detalhe:

Define o alinhamento das opções do controle select. Use left, right ou auto.
Padrão: undefined

filterControlContainer

Atributo: data-filter-control-container
Tipo: Selector
Detalhe:

Defina como, por exemplo, #filter para permitir filtro de entrada personalizado em um elemento com o id filter. Cada elemento de filtro (input ou select) deve ter a seguinte classe bootstrap-table-filter-control-<FieldName> (<FieldName> deve ser substituído pelo nome do Field definido).
Padrão: false

filterDataCollector

Atributo: data-filter-data-collector
Tipo: Function
Detalhe:

Coleta dados que serão adicionados ao filtro select, para filtrar por, por exemplo, rótulos separados por vírgula e exibidos com um formatador.
Padrão: undefined

filterControlMultipleSearch

Atributo: data-filter-control-multiple-search
Tipo: bool
Detalhe:

Defina como true para permitir a pesquisa de múltiplos valores ao mesmo tempo. Os valores serão divididos por um delimitador, veja a opção filterControlMultipleSearchDelimiter.
Padrão: false

filterControlMultipleSearchDelimiter

Atributo: data-filter-control-multiple-search-delimiter
Tipo: String
Detalhe:

Define o delimitador que será usado para dividir os valores de pesquisa na opção filterControlMultipleSearchDelimiter.
Padrão: ,

filterControlSearchClear

Atributo: data-filter-control-search-clear
Tipo: bool
Detalhe:

Defina como true para limpar os filtros de controle usando a opção da tabela showSearchButton.
Padrão: true

searchOnEnterKey

Atributo: data-search-on-enter-key
Tipo: Boolean
Detalhe:

Defina como true para disparar a ação de pesquisa quando o usuário pressionar a tecla enter.
Padrão: false

showFilterControlSwitch

Atributo: data-show-filter-control-switch
Tipo: Boolean
Detalhe:

Defina como true para mostrar o botão de alternância do controle de filtro.
Padrão: false

sortSelectOptions

Atributo: data-sort-select-options
Tipo: Boolean
Detalhe:

Defina como true para ordenar os elementos de opção do controle select.
Padrão: false

Opções de coluna

filterControl

Atributo: data-filter-control
Tipo: String
Detalhe:

Defina input: mostra um controle de entrada, select: mostra um controle de seleção, datepicker: mostra um controle de seletor de data html5.
Padrão: undefined

filterControlPlaceholder

Atributo: data-filter-control-placeholder
Tipo: String
Detalhe:

Defina isso para mostrar um placeholder apenas no controle de filtro de entrada.
Padrão: ''

filterCustomSearch

Atributo: data-filter-custom-search
Tipo: function
Detalhe:

A função de pesquisa personalizada é executada em vez da função de pesquisa interna e recebe quatro parâmetros:
- text: o texto de pesquisa.
- value: o valor da coluna para comparar.
- field: o nome do campo da coluna.
- data: os dados da tabela.
Retorne false para filtrar a coluna/linha atual. Retorne true para não filtrar a coluna/linha atual. Retorne null para pular a pesquisa personalizada para o valor atual.
Padrão: undefined

filterData

Atributo: data-filter-data
Tipo: String
Detalhe:

Define valores personalizados para o filtro select, use var:variable para carregar de uma variável obj:variable.key para carregar de um objeto url:http://www.example.com/data.json para carregar de um arquivo JSON remoto json:{key:data} para carregar de uma string JSON. func:functionName para carregar de uma função.
Padrão: undefined

filterDatepickerOptions

Atributo: data-filter-datepicker-options
Tipo: Object
Detalhe:

Se a opção datepicker estiver definida, use esta opção para configurar o datepicker com as opções nativas. Use desta forma: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. Para obter mais informações, visite esta documentação
Padrão: undefined

filterDefault

Atributo: data-filter-default
Tipo: String
Detalhe:

Define o valor padrão do filtro.
Padrão: undefined

filterOrderBy

Atributo: data-filter-order-by
Tipo: String
Detalhe:

Defina isso para ordenar as opções em um controle select em ordem crescente ('asc'), decrescente ('desc') ou na ordem fornecida pelo servidor ('server').
Padrão: 'asc'

filterStartsWithSearch

Atributo: data-filter-starts-with-search
Tipo: Boolean
Detalhe:

Defina como true se quiser usar o modo de pesquisa por início.
Padrão: false

filterStrictSearch

Atributo: data-filter-strict-search
Tipo: Boolean
Detalhe:

Defina como true se quiser usar o modo de pesquisa estrita.
Padrão: false

Ícones

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

Eventos

onColumnSearch(column-search.bs.table)

Disparado quando estamos pesquisando nos dados da coluna

onCreatedControls(created-controls.bs.table)

Disparado quando estamos pesquisando nos dados da coluna

Métodos

triggerSearch

Dispara manualmente a ação de pesquisa

clearFilterControl

Limpa todos os controles adicionados por este plugin (semelhante à opção showSearchClearButton).

toggleFilterControl

Alterna a visibilidade (mostrar/ocultar) dos controles de filtro.

Localizações

formatClearFilters

Tipo: Function
Padrão: function () { return "Limpar Filtros" }

formatFilterControlSwitch

Tipo: Function
Padrão: function () { return "Ocultar/Mostrar controles" }

formatFilterControlSwitchHide

Tipo: Function
Padrão: function () { return "Ocultar controles" }

formatFilterControlSwitchShow

Tipo: Function
Padrão: function () { return "Mostrar controles" }