Opções da Tabela do Bootstrap Table

A API de opções da tabela do Bootstrap Table.

Nesta página

As opções da tabela são definidas em jQuery.fn.bootstrapTable.defaults.

Nota: Os nomes das opções abaixo (por exemplo, ajax, buttons, cache) são os nomes exatos das propriedades a serem usados ao inicializar o Bootstrap Table via JavaScript.

Por exemplo:

$('#table').bootstrapTable({
  ajax: suaFuncao,
  cache: false,
  ...
})

-

Atributo: data-toggle
Tipo: String
Detalhe:

Ativa a tabela bootstrap sem escrever JavaScript.
Padrão: 'table'
Exemplo: From HTML

ajax

Atributo: data-ajax
Tipo: Function
Detalhe:

Um método para substituir a chamada ajax. Deve implementar a mesma API que o método ajax do jQuery.
Padrão: undefined
Exemplo: Table AJAX

ajaxOptions

Atributo: data-ajax-options
Tipo: Object
Detalhe:

Opções adicionais para enviar requisição ajax. Lista de valores: jQuery.ajax.
Padrão: {}
Exemplo: AJAX Options

buttons

Atributo: data-buttons
Tipo: Function
Detalhe:

Esta opção permite criar/adicionar botão(ões) personalizados à “barra de botões” (canto superior direito da tabela). Esses botões podem ser ordenados com a opção da tabela buttonsOrder, a chave/nome usado para o evento deve ser usado para isso!

O botão personalizado é altamente configurável, existem as seguintes opções:
- text
  - Descrição: Esta opção é usada para a opção da tabela showButtonText.
  - Tipo: String
- icon
  - Descrição: Esta opção é usada para a opção da tabela showButtonIcons.
  - Tipo: String - Apenas precisa da classe do ícone, por exemplo fa-users
- render
  - Descrição: Defina esta opção como false para ocultar o botão por padrão, o botão ficará visível novamente quando você adicionar o atributo de dados data-show-button-name="true".
- attributes
  - Descrição: Esta opção permite adicionar atributos html adicionais, por exemplo title
  - Tipo: Object
  - Exemplo: {title: 'Título do botão'}
- html
  - Descrição: Se você não quiser autogenerar o html, pode usar esta opção para inserir seu html personalizado. A opção event só funciona se seu HTML personalizado contiver name="button-name". Se esta opção for usada, as seguintes opções serão ignoradas:
    - text
    - icon
    - attributes
  - Tipo: Function|String
- event
  - Descrição: Deve ser usado se você quiser adicionar um evento ao botão
  - Tipo: Function|Object|String
A opção event pode ser configurada de três maneiras. Um evento com evento click:
```
{
  'event': () => { }
}
```
Um evento com um tipo de evento definido por si mesmo:
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
Múltiplos eventos com tipos de eventos definidos por si mesmo:
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
Dica: Em vez de funções inline, você também pode usar nomes de funções.

Um botão personalizado configurado pode ficar assim:
```
{
  btnRemoveEvenRows: {
    'text': 'Remover linhas pares',
    'icon': 'fa-trash',
    'event': () => {
      //FAZER ALGUMA COISA PARA REMOVER LINHAS PARES
    },
    'attributes': {
      'title': 'Remover todas as linhas que têm um id par'
    }
  }
}
```
Padrão: {}
Exemplo: Buttons

buttonsAlign

Atributo: data-buttons-align
Tipo: String
Detalhe:

Indica como alinhar os botões da barra de ferramentas. Pode ser usado 'left', 'right'.
Padrão: 'right'
Exemplo: Buttons Align

buttonsAttributeTitle

Atributo: data-buttons-attribute-title
Tipo: String
Detalhe:

Personaliza o atributo title dos botões da barra de ferramentas, que é usado principalmente para personalizar o estilo da barra de ferramentas.
Padrão: 'title'
Exemplo: Buttons Attribute Title

buttonsClass

Atributo: data-buttons-class
Tipo: String
Detalhe:

Define a classe (adicionada após 'btn-') dos botões da tabela.
Padrão: 'secondary'
Exemplo: Buttons Class

buttonsOrder

Atributo: data-buttons-order
Tipo: Array
Detalhe:

Indica como personalizar a ordem dos botões da barra de ferramentas.
Padrão: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
Exemplo: Buttons Order

buttonsPrefix

Atributo: data-buttons-prefix
Tipo: String
Detalhe:

Define o prefixo dos botões da tabela.
Padrão: 'btn'
Exemplo: Buttons Prefix

buttonsToolbar

Atributo: data-buttons-toolbar
Tipo: String/Node
Detalhe:

Um seletor jQuery que indica a barra de ferramentas de botões personalizada, por exemplo: #buttons-toolbar, .buttons-toolbar, ou um nó DOM.
Padrão: undefined
Exemplo: Buttons Toolbar

cache

Atributo: data-cache
Tipo: Boolean
Detalhe:

Defina false para desabilitar o cache de requisições AJAX.
Padrão: true
Exemplo: Table Cache

cardView

Atributo: data-card-view
Tipo: Boolean
Detalhe:

Defina true para mostrar a tabela em visualização de cartão, por exemplo, visualização móvel.
Padrão: false
Exemplo: Card View

checkboxHeader

Atributo: data-checkbox-header
Tipo: Boolean
Detalhe:

Defina false para ocultar a caixa de seleção “marcar todos” na linha do cabeçalho.
Padrão: true
Exemplo: Checkbox Header

classes

Atributo: data-classes
Tipo: String
Detalhe:

O nome da classe da tabela. Pode ser usado 'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' e 'table-borderless'. Por padrão, a tabela tem bordas.
Padrão: 'table table-bordered table-hover'
Exemplo: Table Classes

clickToSelect

Atributo: data-click-to-select
Tipo: Boolean
Detalhe:

Defina true para selecionar a caixa de seleção ou radio box ao clicar nas linhas.
Padrão: false
Exemplo: Click To Select

columns

Atributo: -
Tipo: Array
Detalhe:

O objeto de configuração das colunas da tabela. Veja as propriedades da coluna para mais detalhes.
Padrão: []
Exemplo: Table Columns

contentType

Atributo: data-content-type
Tipo: String
Detalhe:

O contentType dos dados remotos da requisição, por exemplo: application/x-www-form-urlencoded.
Padrão: 'application/json'
Exemplo: Content Type

customSearch

Atributo: data-custom-search
Tipo: Function
Detalhe:

A função de busca personalizada é executada em vez da função de busca embutida, recebe três parâmetros:
- data: os dados da tabela.
- text: o texto de busca.
- filter: o objeto de filtro do método filterBy.
Exemplo de uso:
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
Padrão: undefined
Exemplo: Custom Search

customSort

Atributo: data-custom-sort
Tipo: Function
Detalhe:

A função de ordenação personalizada é executada em vez da função de ordenação embutida, recebe três parâmetros:
- sortName: o nome da ordenação.
- sortOrder: a ordem da ordenação.
- data: os dados das linhas.
Padrão: undefined
Exemplo: Custom Order

data

Atributo: data-data
Tipo: Array | Object
Detalhe:

Os dados a serem carregados.

Se nos dados houver a propriedade _<field>_rowspan ou _<field>_colspan, então as células serão mescladas automaticamente, por exemplo:
```
$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Item 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})
```
Se usar esse recurso, o data é necessário para garantir que o formato esteja correto.
Padrão: []
Exemplo: From Data

dataField

Atributo: data-data-field
Tipo: String
Detalhe:

Chave no JSON de entrada que contém a lista de dados 'rows'.
Padrão: 'rows'
Exemplo: Total/Data Field

dataType

Atributo: data-data-type
Tipo: String
Detalhe:

O tipo de dados que você espera receber do servidor.
Padrão: 'json'
Exemplo: Data Type

detailFilter

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

Ativa a expansão por linha quando detailView está definido como true. Retorna true, e a linha será habilitada para expansão, retorna false e a expansão para a linha será desabilitada. A função padrão retorna true para permitir a expansão para todas as linhas.
Padrão: function(index, row) { return true }
Exemplo: Detail Filter

detailFormatter

Atributo: data-detail-formatter
Tipo: Function
Detalhe:

Formata sua visualização de detalhes quando detailView está definido como true. Retorna uma String, e ela será acrescentada à célula de visualização de detalhes, opcionalmente renderiza o elemento diretamente usando o terceiro parâmetro, que é um elemento jQuery da célula de destino.
Padrão: function(index, row, element) { return '' }
Exemplo: Detail View

detailView

Atributo: data-detail-view
Tipo: Boolean
Detalhe:

Defina true para mostrar uma tabela de visualização de detalhes. Você pode definir a opção uniqueId para manter o estado da visualização de detalhes ao atualizar a tabela.
Padrão: false
Exemplo: Detail View UniqueId

detailViewAlign

Atributo: data-detail-view-align
Tipo: String
Detalhe:

Indica como alinhar o ícone de visualização de detalhes. Pode ser usado 'left', 'right'.
Padrão: 'left'
Exemplo: Detail view Align

detailViewByClick

Atributo: data-detail-view-by-click
Tipo: Boolean
Detalhe:

Defina true para alternar a visualização de detalhes quando uma célula for clicada.
Padrão: false
Exemplo: Detail View Icon

detailViewIcon

Atributo: data-detail-view-icon
Tipo: Boolean
Detalhe:

Defina true para mostrar a coluna de visualização de detalhes (ícone de mais/menos).
Padrão: true
Exemplo: Detail View Icon

escape

Atributo: data-escape
Tipo: Boolean
Detalhe:

Escapa uma string para inserção em HTML, substituindo os caracteres &, <, >, ", `, e '. Para desabilitá-lo para os títulos das colunas, verifique a opção escapeTitle.
Padrão: false
Exemplo: Table Escape

escapeTitle

Atributo: data-escape-title
Tipo: Boolean
Detalhe:

Alterna se a opção escape deve ser aplicada aos títulos das colunas.
Padrão: true
Exemplo: Table Escape title

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

Define as opções padrão do filtro do algoritmo, filterAlgorithm: 'and' significa que todos os filtros dados devem corresponder, filterAlgorithm: 'or' significa que um dos filtros dados deve corresponder.
Padrão: { filterAlgorithm: 'and' }
Exemplo: Filter Options

fixedScroll

Atributo: data-fixed-scroll
Tipo: Boolean
Detalhe:

Defina true para habilitar a posição fixa da barra de rolagem da tabela ao carregar dados.
Padrão: false
Exemplo: Fixed Scroll

footerField

Atributo: data-footer-field
Tipo: String

Detalhe:

Define a chave do Objeto de rodapé (Do array de dados ou JSON de resposta do servidor). O Objeto de rodapé pode ser usado para definir/definir colspan do rodapé e/ou o valor do rodapé. Apenas disparado quando data-pagination é true e data-side-pagination é server.

  {
    "rows": [
      {
        "id": 0,
        "name": "Item 0",
        "price": "$0",
        "amount": 3
      }
    ],
    "footer": {
      "id": "footer id",
      "_id_colspan": 2,
      "name": "footer name"
    }
  }

Padrão: footerField
Exemplo: Footer Field

footerStyle

Atributo: data-footer-style
Tipo: Function
Detalhe:

A função formatadora de estilo do rodapé, recebe um parâmetro:
- column: o objeto da coluna.
Suporta classes ou css. Exemplo de uso:
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Padrão: {}
Exemplo: Footer Style

headerStyle

Atributo: data-header-style
Tipo: Function
Detalhe:

A função formatadora de estilo do cabeçalho, recebe um parâmetro:
- column: o objeto da coluna.
Suporta classes ou css. Exemplo de uso:
```
function headerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Padrão: {}
Exemplo: Header Style

height

Atributo: data-height
Tipo: Number
Detalhe:

A altura da tabela, habilita um cabeçalho fixo da tabela.
Padrão: undefined
Exemplo: Table Height

icons

Atributo: data-icons
Tipo: Object
Detalhe:

Define ícones usados na barra de ferramentas, paginação e visualização de detalhes.

Padrão:

{
  paginationSwitchDown: 'fa-caret-square-down',
  paginationSwitchUp: 'fa-caret-square-up',
  refresh: 'fa-sync',
  toggleOff: 'fa-toggle-off',
  toggleOn: 'fa-toggle-on',
  columns: 'fa-th-list',
  fullscreen: 'fa-arrows-alt',
  detailOpen: 'fa-plus',
  detailClose: 'fa-minus'
}

Exemplo: Table Icons

iconSize

Atributo: data-icon-size
Tipo: String
Detalhe:

Define o tamanho do ícone, pode ser usado undefined, 'lg', 'sm'.
Padrão: undefined
Exemplo: Icon Size

iconsPrefix

Atributo: data-icons-prefix
Tipo: String

Detalhe:

Define o nome do conjunto de ícones. Por padrão, esta opção é calculada automaticamente pelo tema.

{
  bootstrap3: 'glyphicon',
  bootstrap4: 'fa',
  bootstrap5: 'bi',
  'bootstrap-table': 'icon',
  bulma: 'fa',
  foundation: 'fa',
  materialize: 'material-icons',
  semantic: 'fa'
}

Padrão: undefined
Exemplo: Icons Prefix

idField

Atributo: data-id-field
Tipo: String
Detalhe:

Indica qual campo será usado como valor da caixa de seleção/radio, é o contraparte do selectItemName.
Padrão: undefined
Exemplo: Id Field

ignoreClickToSelectOn

Atributo: data-ignore-click-to-select-on
Tipo: Function
Detalhe:

Define os elementos a serem ignorados no clickToSelect. Recebe um parâmetro:
- element: o elemento clicado.
Retorna true se o clique deve ser ignorado, false se o clique deve fazer com que a linha seja selecionada. Esta opção é apenas relevante se clickToSelect for true.
Padrão: { return ['A', 'BUTTON'].includes(tagName) }
Exemplo: Ignore Click To Select On

loadingFontSize

Atributo: data-loading-font-size
Tipo: String
Detalhe:

Para definir o tamanho da fonte do texto de carregamento, o valor padrão é 'auto', calculado automaticamente de acordo com a largura da tabela, entre 12px e 32px.
Padrão: 'auto'
Exemplo: Loading Font Size

loadingTemplate

Atributo: data-loading-template
Tipo: Function
Detalhe:

Para personalizar o tipo de carregamento por si mesmo. O objeto de parâmetros contém:
- loadingMessage: a localização de formatLoadingMessage.

Padrão:

function (loadingMessage) {
  return '<span class="loading-wrap">' +
    '<span class="loading-text">' +
    loadingMessage +
    '</span>' +
    '<span class="animation-wrap"><span class="animation-dot"></span></span>' +
    '</span>'
}

Exemplo: Loading Template

locale

Atributo: data-locale
Tipo: String
Detalhe:

Define o idioma usado pela tabela (por exemplo, 'zh-CN'). Antes de usar esta opção, o arquivo de idioma correspondente deve ser pré-carregado.

O sistema suporta um mecanismo de fallback para idiomas, tentando carregá-los na seguinte ordem de prioridade:
- Primeira prioridade: Tenta carregar o idioma completo especificado (por exemplo, 'zh-CN')
- Segunda prioridade: Tenta converter underscores _ em hífens - e capitalizar o código da região (por exemplo, converter 'zh_CN' para 'zh-CN')
- Terceira prioridade: Tenta usar o código de idioma curto (por exemplo, voltar de 'zh-CN' para 'zh')
- Último recurso: Usa o último arquivo de idioma carregado (se nenhum arquivo de idioma for carregado, usa o idioma padrão embutido)
Nota: Definir esta opção como undefined ou uma string vazia usará automaticamente o último idioma carregado (se nenhum arquivo de idioma for carregado, 'en-US' é usado por padrão).
Padrão: undefined
Exemplo: Table Locale

maintainMetaData

Atributo: data-maintain-meta-data
Tipo: Boolean
Detalhe:

Defina true para manter os seguintes metadados na mudança de página e busca:
- linhas selecionadas
- linhas ocultas
Padrão: false
Exemplo: Maintain Meta Data

method

Atributo: data-method
Tipo: String
Detalhe:

O tipo de método para solicitar dados remotos.
Padrão: 'get'
Exemplo: Table Method

minimumCountColumns

Atributo: data-minimum-count-columns
Tipo: Number
Detalhe:

O número mínimo de colunas para ocultar na lista suspensa de colunas.
Padrão: 1
Exemplo: Minimum Count Columns

multipleSelectRow

Atributo: data-multiple-select-row
Tipo: Boolean
Detalhe:

Defina como true para habilitar a seleção de múltiplas linhas.

Quando habilitado, os usuários podem selecionar múltiplas linhas usando os seguintes métodos:
- Ctrl+clique: Seleciona ou desseleciona linhas individuais (mantendo outras linhas selecionadas)
- Shift+clique: Seleciona todas as linhas entre a linha atualmente selecionada e a linha clicada (seleção de intervalo)
- Clique regular: Se nenhuma tecla modificadora estiver pressionada, seleciona apenas a linha clicada enquanto desseleciona todas as outras
Padrão: false
Exemplo: Multiple Select Row

pageList

Atributo: data-page-list
Tipo: Array
Detalhe:

Ao definir a propriedade de paginação, inicialize o tamanho da página selecionando a lista. Se você incluir a opção 'all' ou 'unlimited', todos os registros serão mostrados em sua tabela.

Dica: Se a tabela tiver menos linhas que a(s) opção(ões), as opções serão ocultadas automaticamente. Para desabilitar esse recurso, você pode definir smartDisplay como false
Padrão: [10, 25, 50, 100]
Exemplo: Page List

pageNumber

Atributo: data-page-number
Tipo: Number
Detalhe:

Ao definir a propriedade de paginação, inicialize o número da página.
Padrão: 1
Exemplo: Page Number

pageSize

Atributo: data-page-size
Tipo: Number
Detalhe:

Ao definir a propriedade de paginação, inicialize o tamanho da página.
Padrão: 10
Exemplo: Page Size

pagination

Atributo: data-pagination
Tipo: Boolean
Detalhe:

Defina true para mostrar uma barra de paginação na parte inferior da tabela.
Padrão: false
Exemplo: Table Pagination

paginationDetailHAlign

Atributo: data-pagination-detail-h-align
Tipo: String
Detalhe:

Indica como alinhar os detalhes da paginação. Pode ser usado 'left', 'right'.
Padrão: 'left'
Exemplo: Pagination H Align

paginationHAlign

Atributo: data-pagination-h-align
Tipo: String
Detalhe:

Indica como alinhar a paginação. Pode ser usado 'left', 'right'.
Padrão: 'right'
Exemplo: Pagination H Align

paginationLoadMore

Atributo: data-pagination-load-more
Tipo: Boolean
Detalhe:

Defina true para habilitar o carregamento de mais dados através da paginação. É usado apenas na paginação do lado do cliente. Em geral, para implementar a funcionalidade “carregar mais”, muitas vezes é necessário combiná-la com um responseHandler para processar os dados retornados.

É usado principalmente em cenários onde o número total de páginas é desconhecido. Nestes casos, não é possível exibir a contagem total exata ou calcular o número total de páginas. Em vez disso, um formato de exibição como “100+” pode ser utilizado para indicar a presença de itens adicionais além da contagem exibida. À medida que o usuário navega para a última página, mais dados são carregados, juntamente com uma atualização das informações de paginação. Este processo continua até que todo o carregamento de dados seja concluído.
Padrão: false
Exemplo: Pagination Load More

paginationLoop

Atributo: data-pagination-loop
Tipo: Boolean
Detalhe:

Defina true para habilitar o modo de loop contínuo da paginação.
Padrão: true
Exemplo: Pagination Loop

paginationNextText

Atributo: data-pagination-next-text
Tipo: String
Detalhe:

Indica o ícone ou texto a ser mostrado nos detalhes da paginação, o botão próximo.
Padrão: '›'
Exemplo: Pagination Text

paginationPagesBySide

Atributo: data-pagination-pages-by-side
Tipo: Number
Detalhe:

O número de páginas em cada lado (direito, esquerdo) da página atual.
Padrão: 1
Exemplo: Pagination Index Number

paginationParts

Atributo: data-pagination-parts
Tipo: Array
Detalhe:

Essas opções definem quais partes da paginação devem ser visíveis.
- pageInfo Mostra qual conjunto de dados será exibido na página atual (por exemplo, Mostrando 1 a 10 de 54 linhas).
- pageInfoShort Semelhante ao pageInfo, só exibe quantas linhas a tabela tem (por exemplo, Mostrando 54 linhas).
- pageSize Mostra o dropdown que define quantas linhas devem ser exibidas na página.
- pageList Mostra a parte principal da paginação (A lista das páginas).
Padrão: ['pageInfo', 'pageSize', 'pageList']
Exemplo: Pagination Parts

paginationPreText

Atributo: data-pagination-pre-text
Tipo: String
Detalhe:

Indica o ícone ou texto mostrado nos detalhes da paginação, o botão anterior.
Padrão: '‹'
Exemplo: Pagination Text

paginationSuccessivelySize

Atributo: data-pagination-successively-size
Tipo: Number
Detalhe:

Número máximo sucessivo de páginas em uma linha.
Padrão: 5
Exemplo: Pagination Index Number

paginationUseIntermediate

Atributo: data-pagination-use-intermediate
Tipo: Boolean
Detalhe:

Calcula e mostra páginas intermediárias para acesso rápido.
Padrão: false
Exemplo: Pagination Index Number

paginationVAlign

Atributo: data-pagination-v-align
Tipo: String
Detalhe:

Indica como alinhar verticalmente a paginação. Pode ser usado 'top', 'bottom', 'both' (coloca a paginação em cima e embaixo).
Padrão: 'bottom'
Exemplo: Pagination V Align

queryParams

Atributo: data-query-params
Tipo: Function
Detalhe:

Ao solicitar dados remotos, você pode enviar parâmetros adicionais modificando queryParams.

Se queryParamsType = 'limit', o objeto params contém: limit, offset, search, sort, order.

Caso contrário, contém: pageSize, pageNumber, searchText, sortName, sortOrder.

Retorne false para parar a requisição.
Padrão: function(params) { return params }
Exemplo: Query Params

queryParamsType

Atributo: data-query-params-type
Tipo: String
Detalhe:

Defina 'limit' para enviar parâmetros de consulta com tipo RESTFul.
Padrão: 'limit'
Exemplo: Query Params Type

regexSearch

Atributo: data-regex-search
Tipo: Boolean
Detalhe:

Defina true para habilitar a busca por regex. Se esta opção estiver habilitada, você pode buscar por regex, por exemplo [47a]$ para todos os itens que terminam com 4, 7 ou a. O regex pode ser inserido com /[47a]$/gim ou sem [47a]$ flags. As flags padrão são gim.
Padrão: false
Exemplo: Regex Search

rememberOrder

Atributo: data-remember-order
Tipo: Boolean
Detalhe:

Defina true para lembrar a ordem de cada coluna.
Padrão: false
Exemplo: Remember Order

responseHandler

Atributo: data-response-handler
Tipo: Function
Detalhe:

Antes de carregar dados remotos, manipule o formato de dados da resposta. O objeto de parâmetros contém:
- res: os dados da resposta.
- jqXHR: objeto jqXHR, que é um super conjunto do objeto XMLHTTPRequest. Para mais informações, veja o Tipo jqXHR.
Padrão: function(res) { return res }
Exemplo: Response Handler

rowAttributes

Atributo: data-row-attributes
Tipo: Function
Detalhe:

A função formatadora de atributos da linha, recebe dois parâmetros:
- row: os dados do registro da linha.
- index: o índice da linha.
Suporta todos os atributos personalizados.
Padrão: {}
Exemplo: Row Attributes

rowStyle

Atributo: data-row-style
Tipo: Function
Detalhe:

A função formatadora de estilo da linha, recebe dois parâmetros:
- row: os dados do registro da linha.
- index: o índice da linha.
Suporta classes ou css.
Padrão: {}
Exemplo: Row Style

search

Atributo: data-search
Tipo: Boolean
Detalhe:

Habilita o input de busca.

Existem três formas de buscar:
- O valor contém a consulta de busca (Padrão). Exemplo: Github contém git.
- O valor deve ser idêntico à consulta de busca. Exemplo: Github (valor) e Github (consulta de busca).
- Comparações (<, >, <=, =<, >=, =>). Exemplo: 4 é maior que 3.
Notas:
- Se você quiser usar um input de busca personalizado, use o searchSelector.
- Você também pode buscar via regex usando a opção regexSearch.
- Se você quiser enviar parâmetros pesquisáveis para paginação no lado do servidor, use a opção searchable.
Padrão: false
Exemplo: Table Search

searchable

Atributo: data-searchable
Tipo: Boolean
Detalhe:

Defina true para enviar parâmetros pesquisáveis para o servidor ao usar paginação no lado do servidor.
Padrão: false
Exemplo: Searchable

searchAccentNeutralise

Atributo: data-search-accent-neutralise
Tipo: Boolean
Detalhe:

Defina como true se você quiser usar o recurso de neutralização de acentos.
Padrão: false
Exemplo: Search Accent Neutralise

searchAlign

Atributo: data-search-align
Tipo: String
Detalhe:

Indica como alinhar o input de busca. Pode ser usado 'left', 'right'.
Padrão: 'right'
Exemplo: Search Align

searchHighlight

Atributo: data-search-highlight
Tipo: Boolean
Detalhe:

Defina como true para destacar o texto buscado (usando a tag HTML <mark>). Você também pode definir um formatador de destaque personalizado, por exemplo, para valores com HTML ou para usar uma cor de destaque personalizada.
Padrão: 'false'
Exemplo: Search Highlight

searchOnEnterKey

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

O método de busca será executado apenas quando a tecla Enter for pressionada.
Padrão: false
Exemplo: Search On Enter Key

searchSelector

Atributo: data-search-selector
Tipo: Boolean|String
Detalhe:

Se esta opção estiver definida (deve ser um seletor dom válido, por exemplo #customSearch), o elemento dom encontrado (um elemento input) será usado como busca da tabela em vez do input de busca embutido.
Padrão: false
Exemplo: Search Selector

searchText

Atributo: data-search-text
Tipo: String
Detalhe:

Ao definir a propriedade de busca, inicialize o texto de busca.
Padrão: ''
Exemplo: Search Text

searchTimeOut

Atributo: data-search-time-out
Tipo: Number
Detalhe:

Define o timeout para o disparo da busca.
Padrão: 500
Exemplo: Search Time Out

selectItemName

Atributo: data-select-item-name
Tipo: String
Detalhe:

O nome do input de radio ou checkbox.
Padrão: 'btSelectItem'
Exemplo: Id Field

serverSort

Atributo: data-server-sort
Tipo: Boolean
Detalhe:

Defina false para classificar os dados no lado do cliente, só funciona quando o sidePagination é server.
Padrão: true
Exemplo: Server Sort

showButtonIcons

Atributo: data-show-button-icons
Tipo: Boolean
Detalhe:

Todos os botões mostrarão ícones neles.
Padrão: true
Exemplo: show button icons

showButtonText

Atributo: data-show-button-text
Tipo: Boolean
Detalhe:

Todos os botões mostrarão texto neles.
Padrão: false
Exemplo: show button text

showColumns

Atributo: data-show-columns
Tipo: Boolean
Detalhe:

Defina true para mostrar a lista suspensa de colunas. Podemos definir a opção de coluna switchable como false para ocultar o item de colunas na lista suspensa. O número mínimo de colunas selecionadas pode ser controlado com a opção da tabela minimumCountColumns.
Padrão: false
Exemplo: Basic Columns e Large Columns

showColumnsSearch

Atributo: data-show-columns-search
Tipo: Boolean
Detalhe:

Defina true para mostrar uma busca para o filtro das colunas.
Padrão: false
Exemplo: Columns Search

showColumnsToggleAll

Atributo: data-show-columns-toggle-all
Tipo: Boolean
Detalhe:

Defina true para mostrar uma caixa de seleção “alternar todas” dentro da opção/dropdown das colunas.
Padrão: false
Exemplo: Columns Toggle All

showExtendedPagination

Atributo: data-show-extended-pagination
Tipo: Boolean
Detalhe:

Defina true para mostrar uma versão estendida da paginação (incluindo a contagem de todas as linhas sem filtros). Se você usar paginação no lado do servidor, por favor use totalNotFilteredField para definir a contagem.
Padrão: false
Exemplo: Show Extended Pagination

showFooter

Atributo: data-show-footer
Tipo: Boolean
Detalhe:

Defina true para mostrar a linha de rodapé de resumo.
Padrão: false
Exemplo: Show Footer

showFullscreen

Atributo: data-show-fullscreen
Tipo: Boolean
Detalhe:

Defina true para mostrar o botão de tela cheia.
Padrão: false
Exemplo: Show Fullscreen

showHeader

Atributo: data-show-header
Tipo: Boolean
Detalhe:

Defina false para ocultar o cabeçalho da tabela.
Padrão: true
Exemplo: Show Header

showPaginationSwitch

Atributo: data-show-pagination-switch
Tipo: Boolean
Detalhe:

Defina true para mostrar o botão de alternância de paginação.
Padrão: false
Exemplo: Show Pagination Switch

showRefresh

Atributo: data-show-refresh
Tipo: Boolean
Detalhe:

Defina true para mostrar o botão de atualização.
Padrão: false
Exemplo: Show Refresh

showSearchButton

Atributo: data-show-search-button
Tipo: Boolean
Detalhe:

Defina true para mostrar um botão de busca atrás do input de busca. A busca só será executada se o botão for pressionado (por exemplo, para evitar tráfego ou tempo de carregamento).
Padrão: false
Exemplo: Show Search Button

showSearchClearButton

Atributo: data-show-search-clear-button
Tipo: Boolean
Detalhe:

Defina true para mostrar um botão de limpar atrás do input de busca, que limpará o input de busca (também todos os filtros do filter-control (se habilitado)).
Padrão: false
Exemplo: Show Search Clear Button

showToggle

Atributo: data-show-toggle
Tipo: Boolean
Detalhe:

Defina true para mostrar o botão de alternância para alternar visualização de tabela/cartão.
Padrão: false
Exemplo: Show Toggle

sidePagination

Atributo: data-side-pagination
Tipo: String
Detalhe:

Define a paginação lateral da tabela, só pode ser 'client' ou 'server'. Usar o lado 'server' requer definir a opção 'url' ou 'ajax'.

Observe que o formato de resposta do servidor necessário é diferente dependendo se a opção 'sidePagination' está definida como 'client' ou 'server'. Veja os seguintes exemplos:
- Sem paginação no lado do servidor
- Com paginação no lado do servidor
Parâmetros da URL:

Quando sidePagination está definido como server, a tabela bootstrap fará chamadas para a url com os seguintes parâmetros da URL:
- offset com um valor entre 0 e total - 1, indicando o primeiro registro a incluir.
- limit com um valor indicando o número de linhas por página.
Ao implementar paginação no lado do servidor, você deve implementar uma visualização JSON em um formato como este exemplo. Essa visualização deve tomar os valores dos parâmetros da URL indicados acima e retornar registros começando no índice offset e retornar o número de registros indicado por limit. Por exemplo, se você quiser registros 11-20, sua visualização deve obter o offset=10 e limit=10 da string da URL e retornar registros como este exemplo.
Padrão: 'client'
Exemplo: Client Side Pagination e Server Side Pagination

silentSort

Atributo: data-silent-sort
Tipo: Boolean
Detalhe:

Defina false para classificar os dados com a mensagem de carregamento. Esta opção funciona quando a opção sidePagination está definida como 'server'.
Padrão: true
Exemplo: Silent Sort

singleSelect

Atributo: data-single-select
Tipo: Boolean
Detalhe:

Defina true para permitir que uma caixa de seleção selecione apenas uma linha.
Padrão: false
Exemplo: Single Select

smartDisplay

Atributo: data-smart-display
Tipo: Boolean
Detalhe:

Defina true para exibir paginação ou visualização de cartão de forma inteligente.
Padrão: true
Exemplo: Smart Display

sortable

Atributo: data-sortable
Tipo: Boolean
Detalhe:

Defina false para desabilitar a ordenação de todas as colunas.
Padrão: true
Exemplo: Table Sortable

sortClass

Atributo: data-sort-class
Tipo: String
Detalhe:

O nome da classe dos elementos td que são classificados.
Padrão: undefined
Exemplo: Sort Class

sortEmptyLast

Atributo: data-sort-empty-last
Tipo: Boolean
Detalhe:

Defina true para classificar <string vazia>, undefined e null como último valor.
Padrão: false
Exemplo: Sort Empty Last

sortName

Atributo: data-sort-name
Tipo: String
Detalhe:

Define qual coluna será classificada. Este campo de atributo funciona junto com sortOrder, e ambos devem ser usados juntos para funcionalidade de classificação adequada.
Padrão: undefined
Exemplo: Sort Name Order

sortOrder

Atributo: data-sort-order
Tipo: String
Detalhe:

Define a ordem de classificação da coluna, só pode ser undefined, 'asc' ou 'desc'. Este campo de atributo funciona junto com sortName, e ambos devem ser usados juntos para funcionalidade de classificação adequada.
Padrão: undefined
Exemplo: Sort Name Order

sortReset

Atributo: data-sort-reset
Tipo: Boolean
Detalhe:

Defina true para redefinir a classificação no terceiro clique.
Padrão: false
Exemplo: Sort Reset

sortResetPage

Atributo: data-sort-reset-page
Tipo: Boolean
Detalhe:

Defina true para redefinir o número da página ao classificar.
Padrão: false
Exemplo: Sort Reset Page

sortStable

Atributo: data-sort-stable
Tipo: Boolean
Detalhe:

Defina true para obter uma classificação estável. Adicionaremos a propriedade '_position' à linha.
Padrão: false
Exemplo: Sort Stable

strictSearch

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

Habilita a busca estrita. Desabilita as verificações de comparação.
Padrão: false
Exemplo: Strict Search

theadClasses

Atributo: data-thead-classes
Tipo: String
Detalhe:

O nome da classe do cabeçalho da tabela. Bootstrap usa as classes modificadoras .thead-light ou .thead-dark para fazer o thead aparecer em cinza claro ou escuro.
Padrão: ''
Exemplo: Thead Classes

Atributo: data-toolbar
Tipo: String/Node
Detalhe:

Um seletor jQuery que indica a barra de ferramentas, por exemplo: #toolbar, .toolbar, ou um nó DOM.
Padrão: undefined
Exemplo: Custom Toolbar

toolbarAlign

Atributo: data-toolbar-align
Tipo: String
Detalhe:

Indica como alinhar a barra de ferramentas personalizada. Pode ser usado 'left', `‘right