table-options.md 13 KB
Table options []({{ site.repo }}/blob/master/docs/_i18n/{{ site.lang }}/documentation/table-options.md)
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. |
| 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'. |
| 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. |
| 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. |
| search | data-search | Boolean | false | Habilita el campo para búsqueda. |
| 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. |
| 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. |
| 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'. |
| clickToSelect | data-click-to-select | Boolean | false | True para seleccionar el checkbox o el radiobox cuando se da click sobre las filas. |
| 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. |
| 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. |
| keyEvents | data-key-events | Boolean | false | True para habilitar los eventos del teclado. La lista es: S/s: El textbox de búsqueda sera enfocado si la opción search está habilitada R/r: Se refrescará la tabla si la opción showRefresh está habilitada T/t: Se cambiará de vista si la opción showToggle está habilitada P/p: Se ocultara/mostrará la paginación si la opción showPaginationSwitch está habilitada. |
| 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. |