Table options

Las opciones de la tabla están definidas en jQuery.fn.bootstrapTable.defaults.

Nombre Atributo Tipo Valor por defecto Descripción
- data-toggle String 'table' Activa bootstrap table sin escribir código JavaScript.
classes data-classes String 'table table-hover' El nombre de la clase de la tabla.
theadClasses data-thead-classes String '' El nombre de clase de la tabla thead. Bootstrap V4, use las clases modificadoras .thead-light o .thead-dark para hacer que theads aparezca en gris claro u oscuro.
sortClass data-sort-class String undefined El nombre de la clase de los elementos td que están ordenados.
height data-height Number undefined El alto de la tabla.
undefinedText data-undefined-text String '-' Define el texto por defecto.
striped data-striped Boolean false True para stripe las filas.
sortName data-sort-name String undefined Define cuales columnas pueden ser ordenadas.
sortOrder data-sort-order String 'asc' Define el método de ordenamiento, solo puede ser 'asc' o 'desc'.
sortStable data-sort-stable Boolean false True to get a stable sorting. We will add _position property to the row.
iconsPrefix data-icons-prefix String 'glyphicon' Define el nombre del icono ('glyphicon' o 'fa' para FontAwesome). Por defecto se usa 'glyphicon'.
icons data-icons Object {
  refresh: 'glyphicon-refresh icon-refresh',
  toggle: 'glyphicon-list-alt icon-list-alt',
  columns: 'glyphicon-th icon-th'
}		 Define los iconos que son usados para los botones de refresh, toggle y columnas.
columns - Array [] El array de columnas de la tabla, vea las propiedades de las columnas para más información.
data - Array [] Los datos que serán cargados.
method data-method String 'get' El tipo de método para hacer request de los datos remotos.
url data-url String undefined Una URL para hacer request de datos en un sitio remoto.
cache data-cache Boolean true False para deshabilitar los AJAX requests.
contentType data-content-type String 'application/json' EL contentType para hacer request de los datos.
dataType data-data-type String 'json' El tipo de datos que se esperan del servidor.
ajaxOptions data-ajax-options Object {} Opciones adicionales para enviar ajax request. Lista de valores: http://api.jquery.com/jQuery.ajax.
queryParams data-query-params Function function(params) {
return params;
}		 Cuando se solicita datos remotos, se debe enviar parámetros adicionales para modificar los queryParams. Si queryParamsType = 'limit', el objecto params contiene:
limit, offset, search, sort, order Sino, el objeoto contiene:
pageSize, pageNumber, searchText, sortName, sortOrder.
Retorna false para parar el request.
queryParamsType data-query-params-type String 'limit' Set 'limit' to send query params width RESTFul type.
responseHandler data-response-handler Function function(res) {
return res;
}		 Antes de cargar los datos remotos, manejar el formato de respuesta de los datos, el objecto parameters contiene:
res: los datos devueltos.
pagination data-pagination Boolean false True para mostrar la paginación al final de la tabla.
paginationLoop data-pagination-loop Boolean true True to enable pagination continuous loop mode.
onlyInfoPagination data-only-info-pagination Boolean false True para mostrar solo la cantidad de los registros que se están mostrando en la tabla. Esta opción necesita que la opción pagination este en true.
sidePagination data-side-pagination String 'client' Define el tipo de paginación de la tabla, puede ser solo 'client' o 'server'.
pageNumber data-page-number Number 1 Cuando se habilita la paginación, inicializa el número de página.
pageSize data-page-size Number 10 Cuando se habilita la paginación, inicializa el tamaño de la página.
pageList data-page-list Array [10, 25, 50, 100, All] Cuando se habilita la paginación, inicializa la lista de cantidad de registros por página.
selectItemName data-select-item-name String 'btSelectItem' El nombre del radio o del checkbox.
smartDisplay data-smart-display Boolean true True para mostrar la páginación o la vista de tarjeta inteligentemente.
escape data-escape Boolean false Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
search data-search Boolean false Habilita el campo para búsqueda.
searchOnEnterKey data-search-on-enter-key Boolean false El método será ejecutado hasta que la tecla Enter sea presionada.
strictSearch data-strict-search Boolean false Habilita la busqueda exacta.
searchText data-search-text String '' Inicializa el campo de búsqueda con el texto especificado.
searchTimeOut data-search-time-out Number 500 Setea el tiempo de espera para iniciar la búsqueda.
showHeader data-show-header Boolean true False para ocultar el encabezado de la tabla.
showFooter data-show-footer Boolean false True para mostrar el footer.
showColumns data-show-columns Boolean false True para mostrar las columnas en una lista.
showRefresh data-show-refresh Boolean false True para mostrar el botón de refresh.
showToggle data-show-toggle Boolean false True para mostrar el botón de vista cambiada entre vista de tabla y vista de tarjeta.
showPaginationSwitch data-show-pagination-switch Boolean false True para mostrar el botón de mostrar/ocultar la paginación.
showFullscreen data-show-fullscreen Boolean false True para mostrar botón de fullscreen.
minimumCountColumns data-minimum-count-columns Number 1 la cantidad mínima de columnas que se deben mostrar.
idField data-id-field String undefined Indica cuál campo es el identificador.
uniqueId data-unique-id String undefined Indica un único id para cada fila.
cardView data-card-view Boolean false True para mostrar la vista de tarjeta, por ejemplo en móviles.
detailView data-detail-view Boolean false True para mostrar la vista detalle en la tabla.
detailFormatter data-detail-formatter Function function(index, row) {
return '';
}		 Formatee su vista detalle cuando detailView está seteada en true.
searchAlign data-search-align String 'right' Indica cómo alinear el campo de búsqueda. Se puede usar 'left', 'right'.
buttonsAlign data-buttons-align String 'right' Indica cómo alinear los botones de la barra de herramientas. Se puede usar 'left', 'right'.
toolbarAlign data-toolbar-align String 'left' Indica cómo alinear la barra de herramientas customizable. Se puede usar 'left', 'right'.
paginationVAlign data-pagination-v-align String 'bottom' Indica cómo alinear la paginación. Se puede usar: 'top', 'bottom', 'both' (coloca la paginación arriba y abajo de la tabla.
paginationHAlign data-pagination-h-align String 'right' Indica cómo alinear la paginación. Se puede usar: 'left', 'right'.
paginationDetailHAlign data-pagination-detail-h-align String 'left' Indica cómo alinear el detalle de la paginación. Se puede usar: 'left', 'right'.
paginationPreText data-pagination-pre-text String '<' Indica el icono o el texto a mostrar en la paginación, el botón previous del detalle de la paginación.
paginationNextText data-pagination-next-text String '>' Indica el icono o el texto a mostrar en la paginación, el botón next del detalle de la paginación.
paginationSuccessivelySize data-pagination-successively-size Number 5 Número máximo sucesivo de páginas en una fila.
paginationPagesBySide data-pagination-pages-by-side Number 1 Número de páginas en cada lado (derecha, izquierda) de la página actual.
paginationUseIntermediate data-pagination-use-intermediate Boolean false Calcula y muestra páginas intermedias para un acceso rápido.
clickToSelect data-click-to-select Boolean false True para seleccionar el checkbox o el radiobox cuando se da click sobre las filas.
ignoreClickToSelectOn data-ignore-click-to-select-on Function { return $.inArray(element.tagName, ['A', 'BUTTON']); } Takes one parameters:
element: the element clicked on.
Return true if the click should be ignored, false if the click should cause the row to be selected. This option is only relevant if clickToSelect is true.
singleSelect data-single-select Boolean false True para permirir solo un checkbox seleccionado.
toolbar data-toolbar String undefined Un selector jQuery que indica la barra de herramientas, por ejemplo:
#toolbar, .toolbar.
buttonsToolbar data-buttons-toolbar String | Node undefined Un selector jQuery que indica la barra de herramientas de botones, por ejemplo:
        #buttons-toolbar, .buttons-toolbar, o un nodo DOM.
checkboxHeader data-checkbox-header Boolean true False para ocular el checkbox check-all en el encabezado de la fila.
maintainSelected data-maintain-selected Boolean false True para mantener las columnas después de seleccionar o cambiar entre páginas.
sortable data-sortable Boolean true False para deshabilitar el ordenamiento en todas las columnas.
silentSort data-silent-sort Boolean true Setear a false para ordenar los datos silenciosamente. Esta opción funciona cuando la opción sidePagination es seteada a server.
rowStyle data-row-style Function {} La función formatter para aplicar el estilo de la fila, toma dos parámetros:
row: los datos de la fila.
index: el índice de la fila.
Soporta clases y CSS.
rowAttributes data-row-attributes Function {} La función formatter para los atributos de la fiila, toma dos parámetros:
row: los datos de la fila.
index: el índice de la fila.
Soporta cualquier atributo customizable.
customSearch data-custom-search Function $.noop The custom search function is executed instead of built-in search function, takes one parameters:
text: the search text.
Example usage:
      function customSearch(text) {
        //Search logic here.
        //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
      }
customSort data-custom-sort Function $.noop The custom sort function is executed instead of built-in sort function, takes two parameters:
sortName: the sort name.
sortOrder: the sort order.
Example usage:
      function customSort(sortName, sortOrder) {
        //Sort logic here.
        //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
      }

Column options

Las propiedades de la columna están definidas en jQuery.fn.bootstrapTable.columnDefaults.

</tbody> </table>
Nombre Atributo Tipo Valor por defecto Descripción
radio data-radio Boolean false True para mostrar un radio. La columna con el radio tiene fijado el ancho.
checkbox data-checkbox Boolean false True para mostrar un checkbox. La columna con el checkbox tiene fijado el ancho.
field data-field String undefined El nombre del campo.
title data-title String undefined El título de la columna.
titleTooltip data-title-tooltip String undefined Texto del title tooltip de la columna. Esta opción soporta el tag title de HTML.
class class / data-class String undefined La clase CSS de la columna.
rowspan rowspan / data-rowspan Number undefined Indica cuantas filas debe tomar una celda.
colspan colspan / data-colspan Number undefined indica cuantas columnas debe tomar una celda.
align data-align String undefined Indica cómo se alinea la columna. Se puede usar 'left', 'right', 'center'.
halign data-halign String undefined Indica cómo se alinea el encabezado de la tabla. Se puede usar 'left', 'right', 'center'.
falign data-falign String undefined Indica cómo se alinea el footer. Se puede usar 'left', 'right', 'center'.
valign data-valign String undefined Indica cómo se alinea el contenido de la celda. Se puede usar 'top', 'middle', 'bottom'.
width data-width Number {Pixeles o Porcentaje} undefined Indica el ancho de la columna. Si no es definido, el ancho será auto. Tmabién puede agregar '%' a su número y la bootstrapTable usará la unidad de porcentaje, sino, puede agregar o no 'px' a su número para que bootstrapTable use pixeles.
sortable data-sortable Boolean false True para permitir que la coluna sea ordenable.
order data-order String 'asc' El valor por defecto para ordenar los datos, solo puede ser 'asc' o 'desc'.
visible data-visible Boolean true False para ocultar el item de la columna.
cardVisible data-card-visible Boolean true False para ocultar columnas en el modo card.
switchable data-switchable Boolean true False para deshabilitar el switchable en el item de la columna.
clickToSelect data-click-to-select Boolean true True para seleccionar un checkbox o radiobox cuando se le da click a la columna.
formatter data-formatter Function undefined El contexto (this) es el objecto columna.
La función de formateo de la celda, toma tres parámetros:
value: el valor del campo.
row: los datos de la fila.
index: el indice de la fila.
footerFormatter data-footer-formatter Function undefined El contexto (this) es el objecto columna.
La función toma un parámetro:
data: Array de todas las filas.
La función debe retornar un string con el texto a mostrar en el footer. </tr>
events data-events Object undefined Los eventos de la celda son escuchados cuando se usa la función formatter, toma tres parámetros:
event: el evento de jQuery.
value: el valor del campo.
row: los datos de la fila.
index: el indice de la fila.
sorter data-sorter Function undefined La función sort es usada para hacer el ordenamiendo customizable, toma dos parámetros:
a: el primer valor del campo.
b: el segundo valor del campo.
rowA: la primera fila.
rowB: la segunda fila.
sortName data-sort-name String undefined Proporcionar una especie-nombre adaptable, no la clase-nombre por defecto en la cabecera, o el nombre del campo de la columna. Por ejemplo, una columna puede mostrar el valor de nombreCampo de "HTML" como "<b><span style="color:red">abc</span></b>", pero una nombreCampo para ordenar es el "contenido" con el valor de "abc".
cellStyle data-cell-style Function undefined La función formatter para el estilo de la celda, toma tres parámetros:
value: el valor del campo.
row: los datos de la fila.
index: el indice de la fila.
field: la vico kampo.
Soporta clases o CSS.
searchable data-searchable Boolean true True para incluir la columna en la búsqueda.
searchFormatter data-search-formatter Boolean true True to search use formated data.
escape data-escape Boolean false Escapes a string for insertion into HTML, replacing &, <, >, ", \`, and ' characters.
showSelectTitle data-show-select-title Boolean false True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.

Events

Evento Evento de jQuery Parámetros Descripción
onAll all.bs.table name, args Se ejecuta cuando todos los eventos son llamados, los parámetros contienen:
name: nombre del evento,
args: datos del evento.
onClickRow click-row.bs.table row, $element Se ejecuta cuando el usuario le da click a una fila, los parámetros contienen:
row: el registro que corresponde con la fila a la que se le dio click,
$element: el elemento tr,
field: el nombre del campo correspondiente a la celda hecho clic.
onDblClickRow dbl-click-row.bs.table row, $element Se ejecuta cuando el usuario le da click a una fila, los parámetros contienen:
row: el registro que corresponde con la fila a la que se le dio click,
$element: el elemento tr,
field: el nombre del campo correspondiente a la celda hecho clic.
onClickCell click-cell.bs.table field, value, row, $element Se ejecuta cuando el usuario le da click a una celda de la tabla, los parámetros contienen:
field: el nombre del campo correspondiente a la celda hecho clic,
value: el valor de datos correspondiente a la celda hecho clic,
row: el registro que corresponde con la fila a la que se le dio click,
$element: el elemento td.
onDblClickCell dbl-click-cell.bs.table field, value, row, $element Se ejecuta cuando el usuario le da click a una celda de la tabla, los parámetros contienen:
field: el nombre del campo correspondiente a la celda hecho clic,
value: el valor de datos correspondiente a la celda hecho clic,
row: el registro que corresponde con la fila a la que se le dio click,
$element: el elemento td.
onSort sort.bs.table name, order Se ejecuta cuando el usuario orderna una columna, los parámetros contienen:
name: el nombre de la columna del campo ordenado
order: el orden utilizado.
onCheck check.bs.table row Se ejecuta cuando el usuario chequea una fila, los parámetros contienen:
row: el registro que corresponde a la fila chequeada. $element: el elemento DOM chequeado.
onUncheck uncheck.bs.table row Se ejecuta cuando el usuario des-chequea una fila, los parámetros contienen:
row: el registro que corresponde a la fila deschequeada. $element: el elemento DOM deschequeado.
onCheckAll check-all.bs.table rows Se ejecuta cuando el usuario chequea todas las filas, los parámetros contienen:
rows: arreglo de las filas chequeadas.
onUncheckAll uncheck-all.bs.table rows Se ejecuta cuando el usuario des-chequea todas las filas, los parámetros contienen:
rows: arreglo de las filas deschequeadas.
onCheckSome check-some.bs.table rows Se ejecuta cuando el usuario chequea algunas filas, los parámetros contienen:
rows: arreglo de las filas chequeadas.
onUncheckSome uncheck-some.bs.table rows Se ejecuta cuando el usuario deschequea algunas filas, los parámetros contienen:
rows: arreglo de las filas deschequeadas.
onLoadSuccess load-success.bs.table data Se ejecuta cuando los datos remotos se cargan correctamente.
onLoadError load-error.bs.table status Se ejecuta cuando ocurre algún error cargando los datos remotos.
onColumnSwitch column-switch.bs.table field, checked Se ejecuta cuando se cambia la visibilidad de una columna.
onColumnSearch column-search.bs.table field, text Se ejecuta cuando se busca por columna.
onPageChange page-change.bs.table number, size Se ejecuta cuando se cambia el número de página o el tamaño de la página.
onSearch search.bs.table text Se ejecuta cuando se busca en la tabla.
onPreBody pre-body.bs.table data Se ejecuta antes de que el cuerpo/contenido de la tabla se construya.
onPostBody post-body.bs.table none Se ejecuta después de que el cuerpo/contenido de la tabla es renderizado y es disponible en el DOM
onPostHeader post-header.bs.table none Se ejecuta después de que el encabezado es renderizado y disponible en el DOM.
onExpandRow expand-row.bs.table index, row, $detail Se ejecuta cuando se da click al icono de detalle para expandir la vista detalle.
onCollapseRow collapse-row.bs.table index, row Se ejecuta cuando se da click al icono de detalle para colapsar la vista detalle.
onRefreshOptions refresh-options.bs.table options Se ejecuta cuando se actualiza el objeto options, este método se ejecuta antes de los eventos destroy e init.
onRefresh refresh.bs.table params Se ejecuta cuando se cliquea el botón de refresh.
onScrollBody scroll-body.bs.table Incendios cuando desplazamiento del cuerpo de la tabla.

Methods

Sintaxis para llamar a un método: $('#table').bootstrapTable('method', parameter).

Nombre Parámetro Descripción
getOptions none Retorna el objeto options.
getSelections none Retorna todas las filas seleccionadas, cuando no hay seleccionadas, se retorna un array vacío .
getData useCurrentPage Retorna los datos cargados en la tabla en el momento que se llama este método. Si se setea useCurrentPage a true se devolverá los datos mostrados en la página actual.
getRowByUniqueId id Se obtiene el dato de la tabla que contiene el id pasado por parámetro
Ejemplo: $('#myTable').bootstrapTable('getRowByUniqueId', "122")
showAllColumns none Muestra todas las columnas. showAllColumns
hideAllColumns none Oculta todas las columnas. hideAllColumns
load data Se cargan los datos en la tabla, las filas antiguas se removeran.
append data Se anexan los datos a la tabla.
prepend data Se antepone los datos a la tabla.
remove params Se remueven los datos de la tabla, los parámetros contienen dos propiedades:
field: el nombre del campo de las filas removidas.
values: el array de valores de las filas que deberían ser removidas.
Ejemplo: $('#myTable').bootstrapTable('remove', {field: 'id', values: ["73", "74"]})
removeAll - Se remueven todos los datos de la tabla
Ejemplo: $('#myTable').bootstrapTable('removeAll')
removeByUniqueId id Se remueve el dato de la tabla que contiene el id pasado por parámetro
Ejemplo: $('#myTable').bootstrapTable('removeByUniqueId', "122")
insertRow params Inserta una nueva fila, los paeámetros contienen las siguientes propiedades:
index: el índice donde se insertara la nueva fila.
row: los datos de la fila.
updateRow params Actualiza la fila especificada, el parámetro contiene las siguientes propiedades:
index: el índice de la fila para ser actualizada.
row: los nuevos data de la fila.
showRow params Muesta la fila especificada. El parámetro contiene los siguiente propiedades:
index: el indice o idField de la fila. isIdField: Boolean que indica si el index es idField o la posición de la fila.
hideRow params Oculta la fila especificada. El parámetro contiene los siguiente propiedades:
index: el indice o idField de la fila. isIdField: Boolean que indica si el index es idField o la posición de la fila.
getHiddenRows boolean Obitnene todas las filas ocultas si se pasa el parámetro show en true las filas serán mostradas, sino, el método solo devolvera las filas ocultas.
mergeCells options Se unen algunas celdas en una, las opciones contienen las siguientes propiedades:
index: el índice de la fila.
field: el nombre del campo.
rowspan: el rowspan para ser unidas.
colspan: el colspan para ser unidas.
updateCell params Actualiza una celda, los parámetros contienen:
rowIndex: índice de la fila.
fieldName: el nombre del campo.
fieldValue: el nuevo valor de la celda.
refresh params Refresca los datos remotos del servidor, se puede setear {silent: true} para refrescar los datos silenciosamente, y setear {url: newUrl} para cambiar el URL. Para suministrar query params especificos para este request, setear {query: {foo: 'bar'}}
refreshOptions options Actualiza el objecto options
resetSearch text Setea el texto de búsqueda
showLoading none Mostrar el estado de la carga.
hideLoading none Ocultar el estado de la carga.
checkAll none Chequear todas las filas de la página actual de la tabla.
uncheckAll none Des-chequear todas las filas de la página actual de la tabla.
check index Chequea una fila, el índice de la fila inicia en 0.
uncheck index Des-chequea una fila, el índice de la fila inicia en 0.
checkBy params Chequea una fila por un array de valores los parámetros continen:
field: nombre del campo a usar para encontrar los registros
values: array de valores de las filas por chequear
Ejemplo:
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckBy params Deschequea una fila por un array de valores los parámetros continen:
field: nombre del campo a usar para encontrar los registros
values: array de valores de las filas por deschequear
Ejemplo:
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetView params Reinicia la vista de bootstrap table, por ejemplo reinicia el alto de la tabla.
destroy none Destruye la bootstrap table.
showColumn field Muestra la columna especificada.
hideColumn field Oculta la columna especificada.
getHiddenColumns - Obtiene las columnas ocultas.
getVisibleColumns - Retorna las columnas visibles.
scrollTo value Setea la posición del scroll, setear 'bottom' significa setear la posición del scroll al final de la tabla.
getScrollPosition none Obtiene la posición actual del scroll.
filterBy params (Solo se puede usar en client-side)Filtra los datos en la tabla, ejm. se puede filtrar {age: 10} para mostrar los daros solo con la edad igual a 10.
selectPage page Ir a una página en especifico.
prevPage none Ir a la página anterior.
nextPage none Ir a la siguiente página.
togglePagination none Habilita y deshabilita la paginación.
toggleView none Alterna la vista entre tabla y tarjeta.
expandRow index Expande la fila que tiene el index pasado por parámetro si la opción detail view está en True.
collapseRow index Colapsa la fila que tiene el index pasado por parámetro si la opción detail view está en True.
expandAllRows is subtable Expande todas las filas si la opción detail view está en True..
collapseAllRows is subtable Colapsa todas las filas si la opción detail view está en True.

Localizations

</tr> </tbody> </table> --- **PS:** Podemos importar [all locale files](https://github.com/wenzhixin/bootstrap-table/tree/master/src/locale) lo que necesita: ```html ... ``` Y luego utilice este código JavaScript para cambiar el lenguaje: ```js $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']); // $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']); // ... ``` O utilice los data attributes para configurar el lenguaje: ```html
Nombre Parámetro Valor por defecto
formatLoadingMessage - 'Loading, please wait…'
formatRecordsPerPage pageNumber '%s records per page'
formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows'
formatDetailPagination totalRows 'Showing %s rows'
formatSearch - 'Search'
formatNoMatches - 'No matching records found'
formatRefresh - 'Refresh'
formatToggle - 'Toggle'
formatColumns - 'Columns'
formatAllRows --/td> 'All'
formatFullscreen - 'Fullscreen'
``` O utilice este JavaScript para configurar el lenguaje: ```js $('table').bootstrapTable({locale:'en-US'}); ```