Opciones de Bootstrap Table

La API de opciones de tabla de Bootstrap Table.

En esta página

Las opciones de tabla se definen en jQuery.fn.bootstrapTable.defaults.

Nota: Los nombres de opciones a continuación (por ejemplo, ajax, buttons, cache) son los nombres exactos de propiedades que se usan al inicializar Bootstrap Table a través de JavaScript.

Por ejemplo:

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

-

Atributo: data-toggle
Tipo: String
Detalle:

Activar bootstrap table sin escribir JavaScript.
Por defecto: 'table'
Ejemplo: From HTML

ajax

Atributo: data-ajax
Tipo: Function
Detalle:

Un método para reemplazar la llamada ajax. Debe implementar la misma API que el método ajax de jQuery.
Por defecto: undefined
Ejemplo: Table AJAX

ajaxOptions

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

Opciones adicionales para enviar solicitud ajax. Lista de valores: jQuery.ajax.
Por defecto: {}
Ejemplo: AJAX Options

buttons

Atributo: data-buttons
Tipo: Function
Detalle:

Esta opción permite crear/agregar botón(es) personalizado(s) a la “barra de botones” (arriba a la derecha de la tabla). Estos botones se pueden ordenar con la opción de tabla buttonsOrder, ¡se debe usar la clave/nombre utilizado para el evento para eso!

El botón personalizado es altamente configurable, existen las siguientes opciones:
- text
  - Descripción: Esta opción se usa para la opción de tabla showButtonText.
  - Tipo: String
- icon
  - Descripción: Esta opción se usa para la opción de tabla showButtonIcons.
  - Tipo: String - Solo necesita la clase del icono, por ejemplo fa-users
- render
  - Descripción: Establezca esta opción en false para ocultar el botón por defecto, el botón vuelve a ser visible cuando agrega el atributo de datos data-show-button-name="true".
- attributes
  - Descripción: Esta opción permite agregar atributos html adicionales, por ejemplo title
  - Tipo: Object
  - Ejemplo: {title: 'Título del botón'}
- html
  - Descripción: Si no quieres autogenerar el html, puedes usar esta opción para insertar tu html personalizado. La opción event solo funciona si tu HTML personalizado contiene name="button-name". Si se usa esta opción, se ignorarán las siguientes opciones:
    - text
    - icon
    - attributes
  - Tipo: Function|String
- event
  - Descripción: Debe usarse si quieres agregar un evento al botón
  - Tipo: Function|Object|String
La opción event se puede configurar de tres maneras. Un evento con evento click:
```
{
  'event': () => { }
}
```
Un evento con un tipo de evento definido por ti:
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
Múltiples eventos con tipos de eventos definidos por ti:
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
Consejo: En lugar de funciones en línea, también puedes usar nombres de funciones.

Un botón personalizado configurado podría verse así:
```
{
  btnRemoveEvenRows: {
    'text': 'Eliminar filas pares',
    'icon': 'fa-trash',
    'event': () => {
      //HACER COSAS PARA ELIMINAR FILAS PARES
    },
    'attributes': {
      'title': 'Eliminar todas las filas que tengan un id par'
    }
  }
}
```
Por defecto: {}
Ejemplo: Buttons

buttonsAlign

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

Indicar cómo alinear los botones de la barra de herramientas. Se pueden usar 'left' (izquierda), 'right' (derecha).
Por defecto: 'right'
Ejemplo: Buttons Align

buttonsAttributeTitle

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

Personalizar el atributo title de los botones de la barra de herramientas, que se usa principalmente para personalizar el estilo de la barra de herramientas.
Por defecto: 'title'
Ejemplo: Buttons Attribute Title

buttonsClass

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

Define la clase (agregada después de 'btn-') de los botones de la tabla.
Por defecto: 'secondary'
Ejemplo: Buttons Class

buttonsOrder

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

Indicar cómo ordenar personalizadamente los botones de la barra de herramientas.
Por defecto: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
Ejemplo: Buttons Order

buttonsPrefix

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

Define el prefijo de los botones de la tabla.
Por defecto: 'btn'
Ejemplo: Buttons Prefix

buttonsToolbar

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

Un selector jQuery que indica la barra de herramientas de botones personalizada, por ejemplo: #buttons-toolbar, .buttons-toolbar, o un nodo DOM.
Por defecto: undefined
Ejemplo: Buttons Toolbar

cache

Atributo: data-cache
Tipo: Boolean
Detalle:

Establecer en false para deshabilitar la caché de solicitudes AJAX.
Por defecto: true
Ejemplo: Table Cache

cardView

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

Establecer en true para mostrar la tabla en vista de tarjeta, por ejemplo, vista móvil.
Por defecto: false
Ejemplo: Card View

checkboxHeader

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

Establecer en false para ocultar la casilla de verificación “seleccionar todo” en la fila de encabezado.
Por defecto: true
Ejemplo: Checkbox Header

classes

Atributo: data-classes
Tipo: String
Detalle:

El nombre de clase de la tabla. Se pueden usar 'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' y 'table-borderless'. Por defecto, la tabla tiene bordes.
Por defecto: 'table table-bordered table-hover'
Ejemplo: Table Classes

clickToSelect

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

Establecer en true para seleccionar la casilla de verificación o el botón de radio al hacer clic en las filas.
Por defecto: false
Ejemplo: Click To Select

columns

Atributo: -
Tipo: Array
Detalle:

El objeto de configuración de columnas de la tabla. Consulte las propiedades de columna para más detalles.
Por defecto: []
Ejemplo: Table Columns

contentType

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

El tipo de contenido de los datos remotos de la solicitud, por ejemplo: application/x-www-form-urlencoded.
Por defecto: 'application/json'
Ejemplo: Content Type

customSearch

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

La función de búsqueda personalizada se ejecuta en lugar de la función de búsqueda integrada, toma tres parámetros:
- data: los datos de la tabla.
- text: el texto de búsqueda.
- filter: el objeto de filtro del método filterBy.
Ejemplo de uso:
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
Por defecto: undefined
Ejemplo: Custom Search

customSort

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

La función de ordenamiento personalizada se ejecuta en lugar de la función de ordenamiento integrada, toma tres parámetros:
- sortName: el nombre de ordenamiento.
- sortOrder: el orden de ordenamiento.
- data: los datos de las filas.
Por defecto: undefined
Ejemplo: Custom Order

data

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

Los datos que se cargarán.

Si en los datos hay una propiedad _<field>_rowspan o _<field>_colspan, entonces fusionará las celdas automáticamente, por ejemplo:
```
$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Elemento 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})
```
Si usa esta característica, el data es necesario para asegurar que el formato sea correcto.
Por defecto: []
Ejemplo: From Data

dataField

Atributo: data-data-field
Tipo: String
Detalle:

Clave en el JSON entrante que contiene la lista de datos 'rows'.
Por defecto: 'rows'
Ejemplo: Total/Data Field

dataType

Atributo: data-data-type
Tipo: String
Detalle:

El tipo de datos que esperas recibir del servidor.
Por defecto: 'json'
Ejemplo: Data Type

detailFilter

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

Habilita la expansión por fila cuando detailView está establecido en true. Devuelve true, y la fila se habilitará para expansión, devuelve false y la expansión de la fila se deshabilitará. La función por defecto devuelve true para permitir la expansión de todas las filas.
Por defecto: function(index, row) { return true }
Ejemplo: Detail Filter

detailFormatter

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

Formatea tu vista de detalle cuando detailView está establecido en true. Devuelve una cadena, y se adjuntará a la celda de vista de detalle, opcionalmente renderiza el elemento directamente usando el tercer parámetro, que es un elemento jQuery de la celda objetivo.
Por defecto: function(index, row, element) { return '' }
Ejemplo: Detail View

detailView

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

Establecer en true para mostrar una tabla de vista detallada. Puedes establecer la opción uniqueId para mantener el estado de la vista de detalle al actualizar la tabla.
Por defecto: false
Ejemplo: Detail View UniqueId

detailViewAlign

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

Indicar cómo alinear el icono de vista de detalle. Se pueden usar 'left' (izquierda), 'right' (derecha).
Por defecto: 'left'
Ejemplo: Detail view Align

detailViewByClick

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

Establecer en true para alternar la vista de detalle cuando se hace clic en una celda.
Por defecto: false
Ejemplo: Detail View Icon

detailViewIcon

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

Establecer en true para mostrar la columna de vista de detalle (icono más/menos).
Por defecto: true
Ejemplo: Detail View Icon

escape

Atributo: data-escape
Tipo: Boolean
Detalle:

Escapa una cadena para su inserción en HTML, reemplazando los caracteres &, <, >, ", ` y '. Para deshabilitarlo para los títulos de columna, verifica la opción escapeTitle.
Por defecto: false
Ejemplo: Table Escape

escapeTitle

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

Alterna si la opción escape debe aplicarse a los títulos de las columnas.
Por defecto: true
Ejemplo: Table Escape title

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

Define las opciones de filtrado predeterminadas del algoritmo, filterAlgorithm: 'and' significa que todos los filtros dados deben coincidir, filterAlgorithm: 'or' significa que uno de los filtros dados debe coincidir.
Por defecto: { filterAlgorithm: 'and' }
Ejemplo: Filter Options

fixedScroll

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

Establecer en true para habilitar la posición fija de la barra de desplazamiento de la tabla al cargar datos.
Por defecto: false
Ejemplo: Fixed Scroll

footerField

Atributo: data-footer-field
Tipo: String

Detalle:

Define la clave del objeto de pie de página (desde la matriz de datos o la respuesta JSON del servidor). El objeto de pie de página se puede usar para establecer/definir el colspan del pie de página y/o el valor del pie de página. Solo se activa cuando data-pagination es true y data-side-pagination es server.

  {
    "rows": [
      {
        "id": 0,
        "name": "Elemento 0",
        "price": "$0",
        "amount": 3
      }
    ],
    "footer": {
      "id": "id del pie",
      "_id_colspan": 2,
      "name": "nombre del pie"
    }
  }

Por defecto: footerField
Ejemplo: Footer Field

footerStyle

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

La función de formateo de estilo de pie de página, toma un parámetro:
- column: el objeto de columna.
Admite classes (clases) o css. Ejemplo de uso:
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Por defecto: {}
Ejemplo: Footer Style

headerStyle

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

La función de formateo de estilo de encabezado, toma un parámetro:
- column: el objeto de columna.
Admite classes (clases) o css. Ejemplo de uso:
```
function headerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Por defecto: {}
Ejemplo: Header Style

height

Atributo: data-height
Tipo: Number
Detalle:

La altura de la tabla, habilita un encabezado fijo de la tabla.
Por defecto: undefined
Ejemplo: Table Height

icons

Atributo: data-icons
Tipo: Object
Detalle:

Define los iconos utilizados en la barra de herramientas, paginación y vista de detalles.

Por defecto:

{
  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'
}

Ejemplo: Table Icons

iconSize

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

Define el tamaño de los iconos. Se pueden usar undefined, 'lg', 'sm'.
Por defecto: undefined
Ejemplo: Icon Size

iconsPrefix

Atributo: data-icons-prefix
Tipo: String

Detalle:

Define el nombre del conjunto de iconos. Por defecto, esta opción se calcula automáticamente según el tema.

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

Por defecto: undefined
Ejemplo: Icons Prefix

idField

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

Indica qué campo se utilizará como valor de casilla de verificación/botón de radio, es el complemento de selectItemName.
Por defecto: undefined
Ejemplo: Id Field

ignoreClickToSelectOn

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

Establece los elementos que se ignorarán en clickToSelect. Toma un parámetro:
- element: el elemento en el que se hizo clic.
Devuelve true si el clic debe ignorarse, false si el clic debe hacer que la fila se seleccione. Esta opción solo es relevante si clickToSelect es true.
Por defecto: { return ['A', 'BUTTON'].includes(tagName) }
Ejemplo: Ignore Click To Select On

loadingFontSize

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

Para definir el tamaño de fuente del texto de carga, el valor por defecto es 'auto', calculado automáticamente según el ancho de la tabla, entre 12px y 32px.
Por defecto: 'auto'
Ejemplo: Loading Font Size

loadingTemplate

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

Para personalizar el tipo de carga por ti mismo. El objeto de parámetros contiene:
- loadingMessage: la localización de formatLoadingMessage.

Por defecto:

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

Ejemplo: Loading Template

locale

Atributo: data-locale
Tipo: String
Detalle:

Establece la localización utilizada por la tabla (por ejemplo, 'zh-CN'). Antes de usar esta opción, el archivo de localización correspondiente debe cargarse previamente.

El sistema admite un mecanismo de reserva para localizaciones, intentando cargarlas en el siguiente orden de prioridad:
- Primera prioridad: Intentar cargar la localización completa especificada (por ejemplo, 'zh-CN')
- Segunda prioridad: Intentar convertir guiones bajos _ en guiones - y capitalizar el código de región (por ejemplo, convertir 'zh_CN' a 'zh-CN')
- Tercera prioridad: Intentar usar el código de idioma corto (por ejemplo, retroceder de 'zh-CN' a 'zh')
- Último recurso: Usar el último archivo de localización cargado (si no se cargan archivos de localización, usar la localización predeterminada integrada)
Nota: Establecer esta opción en undefined o una cadena vacía usará automáticamente la última localización cargada (si no se cargan archivos de localización, se usa 'en-US' por defecto).
Por defecto: undefined
Ejemplo: Table Locale

maintainMetaData

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

Establecer en true para mantener los siguientes metadatos al cambiar de página y buscar:
- filas seleccionadas
- filas ocultas
Por defecto: false
Ejemplo: Maintain Meta Data

method

Atributo: data-method
Tipo: String
Detalle:

El tipo de método para solicitar datos remotos.
Por defecto: 'get'
Ejemplo: Table Method

minimumCountColumns

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

El número mínimo de columnas para ocultar de la lista desplegable de columnas.
Por defecto: 1
Ejemplo: Minimum Count Columns

multipleSelectRow

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

Establecer en true para habilitar la selección de múltiples líneas.

Cuando está habilitado, los usuarios pueden seleccionar múltiples líneas usando los siguientes métodos:
- Ctrl+click: Seleccionar o deseleccionar líneas individuales (manteniendo otras líneas seleccionadas)
- Shift+click: Seleccionar todas las líneas entre la línea actualmente seleccionada y la línea clickeada (selección de rango)
- Clic regular: Si no se presiona ninguna tecla modificadora, selecciona solo la fila clickeada mientras deselecciona todas las demás
Por defecto: false
Ejemplo: Multiple Select Row

pageList

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

Al establecer la propiedad de paginación, inicializa el tamaño de página seleccionando la lista. Si incluye la opción 'all' (todo) o 'unlimited' (ilimitado), todos los registros se mostrarán en su tabla.

Consejo: Si la tabla tiene menos filas que la opción(es), las opciones se ocultarán automáticamente. Para deshabilitar esa característica, puedes establecer smartDisplay en false
Por defecto: [10, 25, 50, 100]
Ejemplo: Page List

pageNumber

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

Al establecer la propiedad de paginación, inicializa el número de página.
Por defecto: 1
Ejemplo: Page Number

pageSize

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

Al establecer la propiedad de paginación, inicializa el tamaño de página.
Por defecto: 10
Ejemplo: Page Size

pagination

Atributo: data-pagination
Tipo: Boolean
Detalle:

Establecer en true para mostrar una barra de herramientas de paginación en la parte inferior de la tabla.
Por defecto: false
Ejemplo: Table Pagination

paginationDetailHAlign

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

Indicar cómo alinear el detalle de paginación. Se pueden usar 'left' (izquierda), 'right' (derecha).
Por defecto: 'left'
Ejemplo: Pagination H Align

paginationHAlign

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

Indicar cómo alinear la paginación. Se pueden usar 'left' (izquierda), 'right' (derecha).
Por defecto: 'right'
Ejemplo: Pagination H Align

paginationLoadMore

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

Establecer en true para habilitar la carga de más datos a través de la paginación. Solo se usa en la paginación del lado del cliente. En general, para implementar la funcionalidad “cargar más”, a menudo es necesario combinarla con un responseHandler para procesar los datos devueltos.

Se usa principalmente en escenarios donde el número total de páginas es desconocido. En tales casos, no es posible mostrar el recuento total exacto o calcular el número total de páginas. En su lugar, se puede utilizar un formato de visualización como “100+” para indicar la presencia de elementos adicionales más allá del recuento mostrado. A medida que el usuario navega a la última página, se cargan más datos, junto con una actualización de la información de paginación. Este proceso continúa hasta que se completa toda la carga de datos.
Por defecto: false
Ejemplo: Pagination Load More

paginationLoop

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

Establecer en true para habilitar el modo de bucle continuo de paginación.
Por defecto: true
Ejemplo: Pagination Loop

paginationNextText

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

Indicar el icono o texto que se mostrará en el detalle de paginación, el botón siguiente.
Por defecto: '›'
Ejemplo: Pagination Text

paginationPagesBySide

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

El número de páginas en cada lado (derecha, izquierda) de la página actual.
Por defecto: 1
Ejemplo: Pagination Index Number

paginationParts

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

Estas opciones definen qué partes de la paginación deben ser visibles.
- pageInfo Muestra qué conjunto de datos se mostrará en la página actual (por ejemplo: Mostrando 1 a 10 de 54 filas).
- pageInfoShort Similar a pageInfo, solo muestra cuántas filas tiene la tabla (por ejemplo: Mostrando 54 filas).
- pageSize Muestra el menú desplegable que define cuántas filas se deben mostrar en la página.
- pageList Muestra la parte principal de la paginación (La lista de páginas).
Por defecto: ['pageInfo', 'pageSize', 'pageList']
Ejemplo: Pagination Parts

paginationPreText

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

Indicar el icono o texto que se muestra en el detalle de paginación, el botón anterior.
Por defecto: '‹'
Ejemplo: Pagination Text

paginationSuccessivelySize

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

Número máximo sucesivo de páginas en una fila.
Por defecto: 5
Ejemplo: Pagination Index Number

paginationUseIntermediate

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

Calcular y mostrar páginas intermedias para acceso rápido.
Por defecto: false
Ejemplo: Pagination Index Number

paginationVAlign

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

Indicar cómo alinear verticalmente la paginación. Se pueden usar 'top' (arriba), 'bottom' (abajo), 'both' (poner la paginación arriba y abajo).
Por defecto: 'bottom'
Ejemplo: Pagination V Align

queryParams

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

Al solicitar datos remotos, puedes enviar parámetros adicionales modificando queryParams.

Si queryParamsType = 'limit', el objeto params contiene: limit, offset, search, sort, order.

De lo contrario, contiene: pageSize, pageNumber, searchText, sortName, sortOrder.

Devuelve false para detener la solicitud.
Por defecto: function(params) { return params }
Ejemplo: Query Params

queryParamsType

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

Establecer en 'limit' para enviar parámetros de consulta con tipo RESTFul.
Por defecto: 'limit'
Ejemplo: Query Params Type

regexSearch

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

Establecer en true para habilitar la búsqueda por expresiones regulares. Si esta opción está habilitada, puedes buscar con expresiones regulares, por ejemplo: [47a]$ para todos los elementos que terminan con 4, 7 o a. La expresión regular se puede ingresar con /[47a]$/gim o sin banderas [47a]$. Las banderas por defecto son gim.
Por defecto: false
Ejemplo: Regex Search

rememberOrder

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

Establecer en true para recordar el orden de cada columna.
Por defecto: false
Ejemplo: Remember Order

responseHandler

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

Antes de cargar datos remotos, maneja el formato de datos de respuesta. El objeto de parámetros contiene:
- res: los datos de respuesta.
- jqXHR: objeto jqXHR, que es un super conjunto del objeto XMLHTTPRequest. Para obtener más información, consulte el Tipo jqXHR.
Por defecto: function(res) { return res }
Ejemplo: Response Handler

rowAttributes

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

La función de formateo de atributos de fila, toma dos parámetros:
- row: los datos del registro de fila.
- index: el índice de la fila.
Admite todos los atributos personalizados.
Por defecto: {}
Ejemplo: Row Attributes

rowStyle

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

La función de formateo de estilo de fila, toma dos parámetros:
- row: los datos del registro de fila.
- index: el índice de la fila.
Admite clases o css.
Por defecto: {}
Ejemplo: Row Style

search

Atributo: data-search
Tipo: Boolean
Detalle:

Habilita el campo de búsqueda.

Hay tres formas de buscar:
- El valor contiene la consulta de búsqueda (Por defecto). Ejemplo: Github contiene git.
- El valor debe ser idéntico a la consulta de búsqueda. Ejemplo: Github (valor) y Github (consulta de búsqueda).
- Comparaciones (<, >, <=, =<, >=, =>). Ejemplo: 4 es mayor que 3.
Notas:
- Si quieres usar un campo de búsqueda personalizado, usa el searchSelector.
- También puedes buscar mediante expresiones regulares usando la opción regexSearch.
- Si quieres enviar parámetros buscables a la paginación del lado del servidor, usa la opción searchable.
Por defecto: false
Ejemplo: Table Search

searchable

Atributo: data-searchable
Tipo: Boolean
Detalle:

Establecer en true para enviar parámetros buscables al servidor mientras usa paginación del lado del servidor.
Por defecto: false
Ejemplo: Searchable

searchAccentNeutralise

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

Establecer en true si quieres usar la función de neutralización de acentos.
Por defecto: false
Ejemplo: Search Accent Neutralise

searchAlign

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

Indicar cómo alinear el campo de búsqueda. Se pueden usar 'left' (izquierda), 'right' (derecha).
Por defecto: 'right'
Ejemplo: Search Align

searchHighlight

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

Establecer en true para resaltar el texto buscado (utilizando la etiqueta HTML <mark>). También puedes definir un formateador de resaltado personalizado, por ejemplo, para valores con HTML o para usar un color de resaltado personalizado.
Por defecto: 'false'
Ejemplo: Search Highlight

searchOnEnterKey

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

El método de búsqueda se ejecutará hasta que se presione la tecla Enter.
Por defecto: false
Ejemplo: Search On Enter Key

searchSelector

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

Si esta opción está establecida (debe ser un selector DOM válido, por ejemplo: #customSearch), el elemento DOM encontrado (un elemento input) se usará como búsqueda de tabla en lugar del campo de búsqueda integrado.
Por defecto: false
Ejemplo: Search Selector

searchText

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

Al establecer la propiedad de búsqueda, inicializa el texto de búsqueda.
Por defecto: ''
Ejemplo: Search Text

searchTimeOut

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

Establecer tiempo de espera para el disparo de búsqueda.
Por defecto: 500
Ejemplo: Search Time Out

selectItemName

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

El nombre del input de radio o checkbox.
Por defecto: 'btSelectItem'
Ejemplo: Id Field

serverSort

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

Establecer en false para ordenar los datos en el lado del cliente, solo funciona cuando sidePagination es server.
Por defecto: true
Ejemplo: Server Sort

showButtonIcons

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

Todos los botones mostrarán iconos en ellos.
Por defecto: true
Ejemplo: show button icons

showButtonText

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

Todos los botones mostrarán texto en ellos.
Por defecto: false
Ejemplo: show button text

showColumns

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

Establecer en true para mostrar la lista desplegable de columnas. Podemos establecer la opción de columna switchable en false para ocultar el elemento de columnas en la lista desplegable. El número mínimo de columnas seleccionadas se puede controlar con la opción de tabla minimumCountColumns.
Por defecto: false
Ejemplo: Basic Columns y Large Columns

showColumnsSearch

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

Establecer en true para mostrar una búsqueda para el filtro de columnas.
Por defecto: false
Ejemplo: Columns Search

showColumnsToggleAll

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

Establecer en true para mostrar una casilla de verificación de alternar todo dentro de la opción/desplegable de columnas.
Por defecto: false
Ejemplo: Columns Toggle All

showExtendedPagination

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

Establecer en true para mostrar una versión extendida de paginación (incluida la cuenta de todas las filas sin filtros). Si usa paginación en el lado del servidor, por favor use totalNotFilteredField para definir la cuenta.
Por defecto: false
Ejemplo: Show Extended Pagination

showFooter

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

Establecer en true para mostrar la fila de pie de página de resumen.
Por defecto: false
Ejemplo: Show Footer

showFullscreen

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

Establecer en true para mostrar el botón de pantalla completa.
Por defecto: false
Ejemplo: Show Fullscreen

showHeader

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

Establecer en false para ocultar el encabezado de la tabla.
Por defecto: true
Ejemplo: Show Header

showPaginationSwitch

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

Establecer en true para mostrar el botón de cambio de paginación.
Por defecto: false
Ejemplo: Show Pagination Switch

showRefresh

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

Establecer en true para mostrar el botón de actualización.
Por defecto: false
Ejemplo: Show Refresh

showSearchButton

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

Establecer en true para mostrar un botón de búsqueda detrás del campo de búsqueda. La búsqueda solo se ejecutará si se presiona el botón (por ejemplo, para evitar tráfico o tiempo de carga).
Por defecto: false
Ejemplo: Show Search Button

showSearchClearButton

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

Establecer en true para mostrar un botón de limpieza detrás del campo de búsqueda, que limpiará el campo de búsqueda (también todos los filtros de control de filtro, si están habilitados).
Por defecto: false
Ejemplo: Show Search Clear Button

showToggle

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

Establecer en true para mostrar el botón de alternancia para cambiar entre vista de tabla y tarjeta.
Por defecto: false
Ejemplo: Show Toggle

sidePagination

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

Define el lado de paginación de la tabla, solo puede ser 'client' (cliente) o 'server' (servidor). Usar el lado 'server' requiere establecer la opción 'url' o 'ajax'.

Ten en cuenta que el formato de respuesta del servidor requerido es diferente dependiendo de si la opción 'sidePagination' está establecida en 'client' o 'server'. Consulta los siguientes ejemplos:
- Sin paginación del lado del servidor
- Con paginación del lado del servidor
Parámetros de URL:

Cuando sidePagination está establecido en server, la tabla bootstrap hará llamadas a la url con los siguientes parámetros de URL:
- offset con un valor entre 0 y total - 1, que indica el primer registro a incluir.
- limit con un valor que indica el número de filas por página.
Al implementar la paginación del lado del servidor, debes implementar una vista JSON en un formato como este ejemplo. Esa vista debe tomar los valores de los parámetros de URL indicados anteriormente y devolver registros comenzando en el índice offset y devolver el número de registros indicado por limit. Por ejemplo, si quieres los registros 11-20, tu vista debe obtener offset=10 y limit=10 de la cadena URL y devolver registros como este ejemplo.
Por defecto: 'client'
Ejemplo: Client Side Pagination y Server Side Pagination

silentSort

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

Establecer en false para ordenar los datos con el mensaje de carga. Esta opción funciona cuando la opción sidePagination está establecida en 'server'.
Por defecto: true
Ejemplo: Silent Sort

singleSelect

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

Establecer en true para permitir que una casilla de verificación seleccione solo una fila.
Por defecto: false
Ejemplo: Single Select

smartDisplay

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

Establecer en true para habilitar la paginación inteligente y la visualización de vista de tarjeta.
Por defecto: true
Ejemplo: Smart Display

sortable

Atributo: data-sortable
Tipo: Boolean
Detalle:

Establecer en false para deshabilitar la ordenación de todas las columnas.
Por defecto: true
Ejemplo: Table Sortable

sortClass

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

El nombre de la clase de los elementos td que se ordenan.
Por defecto: undefined
Ejemplo: Sort Class

sortEmptyLast

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

Establecer en true para ordenar <cadena vacía>, undefined y null como último valor.
Por defecto: false
Ejemplo: Sort Empty Last

sortName

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

Define qué columna se ordenará. Este campo de atributo funciona junto con sortOrder, y ambos deben usarse juntos para una funcionalidad de ordenación adecuada.
Por defecto: undefined
Ejemplo: Sort Name Order

sortOrder

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

Define el orden de clasificación de la columna, solo puede ser undefined, 'asc' (ascendente) o 'desc' (descendente). Este campo de atributo funciona junto con sortName, y ambos deben usarse juntos para una funcionalidad de ordenación adecuada.
Por defecto: undefined
Ejemplo: Sort Name Order

sortReset

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

Establecer en true para restablecer la ordenación en el tercer clic.
Por defecto: false
Ejemplo: Sort Reset

sortResetPage

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

Establecer en true para restablecer el número de página al ordenar.
Por defecto: false
Ejemplo: Sort Reset Page

sortStable

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

Establecer en true para obtener una ordenación estable. Agregaremos la propiedad '_position' a la fila.
Por defecto: false
Ejemplo: Sort Stable

strictSearch

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

Habilita la búsqueda estricta. Deshabilita las verificaciones de comparación.
Por defecto: false
Ejemplo: Strict Search

theadClasses

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

El nombre de la clase del thead de la tabla. Bootstrap usa las clases modificadoras .thead-light o .thead-dark para que thead aparezca de color gris claro o oscuro.
Por defecto: ''
Ejemplo: Thead Classes

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

Un selector jQuery que indica la barra de herramientas, por ejemplo: #toolbar, .toolbar, o un nodo DOM.
Por defecto: undefined
Ejemplo: Custom Toolbar

toolbarAlign

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

Indicar cómo alinear la barra de herramientas personalizada. Se pueden usar 'left' (izquierda), 'right' (derecha).
Por defecto: 'left'
Ejemplo: Toolbar Align

totalField

Atributo: data-total-field
Tipo: String
Detalle:

Clave en el JSON entrante que contiene los datos 'total'.
Por defecto: 'total'
Ejemplo: Total/Data Field

totalNotFiltered

Atributo: data-total-not-filtered
Tipo: Number
Detalle:

Esta propiedad se pasa principalmente por el servidor de paginación, lo que facilita su uso.
Por defecto: 0

totalNotFilteredField

Atributo: data-total-not-filtered-field
Tipo: string
Detalle:

El campo de la respuesta JSON que se utilizará para showExtendedPagination.
Por defecto: totalNotFiltered
Ejemplo: Total Not Filtered Field

totalRows

Atributo: data-total-rows
Tipo: Number
Detalle:

Esta propiedad se pasa principalmente por el servidor de paginación, lo que facilita su uso.
Por defecto: 0

trimOnSearch

Atributo: data-trim-on-search
Tipo: Boolean
Detalle:

Establecer en true para recortar los espacios en el campo de búsqueda.
Por defecto: true
Ejemplo: Trim On Search

undefinedText

Atributo: data-undefined-text
Tipo: String
Detalle:

Define el texto por defecto para undefined.
Por defecto: '-'
Ejemplo: Undefined Text

uniqueId

Atributo: data-unique-id
Tipo: String
Detalle:

Indicar un identificador único para cada fila. El id único siempre debe ser seguro para html, por ejemplo, alfanumérico, no debe contener caracteres que puedan romper html, por ejemplo: ".
Por defecto: undefined
Ejemplo: getRowByUniqueId

url

Atributo: data-url
Tipo: String
Detalle:

Una URL para solicitar datos desde un sitio remoto.

Ten en cuenta que el formato de respuesta del servidor requerido es diferente dependiendo de si se especifica la opción 'sidePagination'. Consulta los siguientes ejemplos:
- Sin paginación del lado del servidor
- Con paginación del lado del servidor
Parámetros de URL:

Cuando sidePagination está establecido en server, la tabla bootstrap hará llamadas a la url con los siguientes parámetros de URL:
- offset con un valor entre 0 y total - 1, que indica el primer registro a incluir.
- limit con un valor que indica el número de filas por página.
Al implementar la paginación del lado del servidor, debes implementar una vista JSON en un formato como este ejemplo. Esa vista debe tomar los valores de los parámetros de URL indicados anteriormente y devolver registros comenzando en el índice offset y devolver el número de registros indicado por limit. Por ejemplo, si quieres los registros 11-20, tu vista debe obtener offset=10 y limit=10 de la cadena URL y devolver registros como este ejemplo.
Por defecto: undefined
Ejemplo: From URL
Manejo de errores

Para obtener errores de carga, por favor usa onLoadError

virtualScroll

Atributo: data-virtual-scroll
Tipo: Boolean
Detalle:

Establecer en true para habilitar el desplazamiento virtual y mostrar una lista virtual “infinita”.

Nota: Actualmente, la implementación asume que cada línea tiene la misma altura. Si las alturas de las líneas varían, pueden ocurrir errores impredecibles. Por favor, asegúrate de que la altura de cada línea sea consistente, o aplica el estilo td { white-space: nowrap; } para solucionar este problema.
Por defecto: false
Ejemplo: Large Data

virtualScrollItemHeight

Atributo: data-virtual-scroll-item-height
Tipo: Number
Detalle:

Si esta opción no está definida, usaremos la altura del primer elemento por defecto.

Es importante proporcionar esto si la altura del elemento virtual es significativamente mayor que la altura por defecto. Esta dimensión se usa para ayudar a determinar cuántas celdas se deben crear al inicializar y para ayudar a calcular la altura del área desplazable. Este valor de altura solo puede usar unidades px.
Por defecto: undefined

visibleSearch

Atributo: data-visible-search
Tipo: Boolean
Detalle:

Establecer en true para buscar solo en columnas/datos visibles. Si los datos contienen otros valores que no se muestran, se ignorarán durante la búsqueda.
Por defecto: false
Ejemplo: visible search