corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 office 1 # Table options []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/table-options.md)
2  
3 ---
4  
5 Las opciones de la tabla están definidas en `jQuery.fn.bootstrapTable.defaults`.
6  
7 <table class="table"
8 id="t"
9 data-search="true"
10 data-show-toggle="true"
11 data-show-columns="true"
12 data-mobile-responsive="true">
13 <thead>
14 <tr>
15 <th>Nombre</th>
16 <th>Atributo</th>
17 <th>Tipo</th>
18 <th>Valor por defecto</th>
19 <th>Descripción</th>
20 </tr>
21 </thead>
22 <tbody>
23 <tr>
24 <td>-</td>
25 <td>data-toggle</td>
26 <td>String</td>
27 <td>'table'</td>
28 <td>Activa bootstrap table sin escribir código JavaScript.</td>
29 </tr>
30 <tr>
31 <td>classes</td>
32 <td>data-classes</td>
33 <td>String</td>
34 <td>'table table-hover'</td>
35 <td>El nombre de la clase de la tabla.</td>
36 </tr>
37 <tr>
38 <td>sortClass</td>
39 <td>data-sort-class</td>
40 <td>String</td>
41 <td>undefined</td>
42 <td>El nombre de la clase de los elementos td que están ordenados.</td>
43 </tr>
44 <tr>
45 <td>height</td>
46 <td>data-height</td>
47 <td>Number</td>
48 <td>undefined</td>
49 <td>El alto de la tabla.</td>
50 </tr>
51 <tr>
52 <td>undefinedText</td>
53 <td>data-undefined-text</td>
54 <td>String</td>
55 <td>'-'</td>
56 <td>Define el texto por defecto.</td>
57 </tr>
58 <tr>
59 <td>striped</td>
60 <td>data-striped</td>
61 <td>Boolean</td>
62 <td>false</td>
63 <td>True para stripe las filas.</td>
64 </tr>
65 <tr>
66 <td>sortName</td>
67 <td>data-sort-name</td>
68 <td>String</td>
69 <td>undefined</td>
70 <td>Define cuales columnas pueden ser ordenadas.</td>
71 </tr>
72 <tr>
73 <td>sortOrder</td>
74 <td>data-sort-order</td>
75 <td>String</td>
76 <td>'asc'</td>
77 <td>Define el método de ordenamiento, solo puede ser 'asc' o 'desc'.</td>
78 </tr>
79 <tr>
80 <td>sortStable</td>
81 <td>data-sort-stable</td>
82 <td>Boolean</td>
83 <td>false</td>
84 <td>True to get a stable sorting. We will add <code>_position</code> property to the row.</td>
85 </tr>
86 <tr>
87 <td>iconsPrefix</td>
88 <td>data-icons-prefix</td>
89 <td>String</td>
90 <td>'glyphicon'</td>
91 <td>Define el nombre del icono ('glyphicon' o 'fa' para FontAwesome). Por defecto se usa 'glyphicon'. </td>
92 </tr>
93 <tr>
94 <td>icons</td>
95 <td>data-icons</td>
96 <td>Object</td>
97 <td>{<br/>
98 &nbsp;&nbsp;refresh: 'glyphicon-refresh icon-refresh',<br/>
99 &nbsp;&nbsp;toggle: 'glyphicon-list-alt icon-list-alt',<br/>
100 &nbsp;&nbsp;columns: 'glyphicon-th icon-th'<br/>
101 }</td>
102 <td>Define los iconos que son usados para los botones de refresh, toggle y columnas.</td>
103 </tr>
104 <tr>
105 <td>columns</td>
106 <td>-</td>
107 <td>Array</td>
108 <td>[]</td>
109 <td>El array de columnas de la tabla, vea las propiedades de las columnas para más información.</td>
110 </tr>
111 <tr>
112 <td>data</td>
113 <td>-</td>
114 <td>Array</td>
115 <td>[]</td>
116 <td>Los datos que serán cargados.</td>
117 </tr>
118 <tr>
119 <td>method</td>
120 <td>data-method</td>
121 <td>String</td>
122 <td>'get'</td>
123 <td>El tipo de método para hacer request de los datos remotos.</td>
124 </tr>
125 <tr>
126 <td>url</td>
127 <td>data-url</td>
128 <td>String</td>
129 <td>undefined</td>
130 <td>Una URL para hacer request de datos en un sitio remoto.</td>
131 </tr>
132 <tr>
133 <td>cache</td>
134 <td>data-cache</td>
135 <td>Boolean</td>
136 <td>true</td>
137 <td>False para deshabilitar los AJAX requests.</td>
138 </tr>
139 <tr>
140 <td>contentType</td>
141 <td>data-content-type</td>
142 <td>String</td>
143 <td>'application/json'</td>
144 <td>EL contentType para hacer request de los datos.</td>
145 </tr>
146 <tr>
147 <td>dataType</td>
148 <td>data-data-type</td>
149 <td>String</td>
150 <td>'json'</td>
151 <td>El tipo de datos que se esperan del servidor.</td>
152 </tr>
153 <tr>
154 <td>ajaxOptions</td>
155 <td>data-ajax-options</td>
156 <td>Object</td>
157 <td>{}</td>
158 <td>Opciones adicionales para enviar ajax request. Lista de valores: <a href="http://api.jquery.com/jQuery.ajax">http://api.jquery.com/jQuery.ajax</a>.</td>
159 </tr>
160 <tr>
161 <td>queryParams</td>
162 <td>data-query-params</td>
163 <td>Function</td>
164 <td>function(params) {<br>return params;<br>}</td>
165 <td>
166 Cuando se solicita datos remotos, se debe enviar parámetros adicionales para modificar los queryParams.
167 Si queryParamsType = 'limit', el objecto params contiene: <br>
168 limit, offset, search, sort, order
169 Sino, el objeoto contiene: <br>
170 pageSize, pageNumber, searchText, sortName, sortOrder. <br>
171 Retorna false para parar el request.
172 </td>
173 </tr>
174 <tr>
175 <td>queryParamsType</td>
176 <td>data-query-params-type</td>
177 <td>String</td>
178 <td>'limit'</td>
179 <td>Set 'limit' to send query params width RESTFul type.</td>
180 </tr>
181 <tr>
182 <td>responseHandler</td>
183 <td>data-response-handler</td>
184 <td>Function</td>
185 <td>function(res) {<br>return res;<br>}</td>
186 <td>
187 Antes de cargar los datos remotos, manejar el formato de respuesta de los datos, el objecto parameters contiene: <br>
188 res: los datos devueltos.
189 </td>
190 </tr>
191 <tr>
192 <td>pagination</td>
193 <td>data-pagination</td>
194 <td>Boolean</td>
195 <td>false</td>
196 <td>True para mostrar la paginación al final de la tabla.</td>
197 </tr>
198 <tr>
199 <td>paginationLoop</td>
200 <td>data-pagination-loop</td>
201 <td>Boolean</td>
202 <td>true</td>
203 <td>True to enable pagination continuous loop mode.</td>
204 </tr>
205 <tr>
206 <td>onlyInfoPagination</td>
207 <td>data-only-info-pagination</td>
208 <td>Boolean</td>
209 <td>false</td>
210 <td>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.</td>
211 </tr>
212 <tr>
213 <td>sidePagination</td>
214 <td>data-side-pagination</td>
215 <td>String</td>
216 <td>'client'</td>
217 <td>Define el tipo de paginación de la tabla, puede ser solo 'client' o 'server'.</td>
218 </tr>
219 <tr>
220 <td>pageNumber</td>
221 <td>data-page-number</td>
222 <td>Number</td>
223 <td>1</td>
224 <td>Cuando se habilita la paginación, inicializa el número de página.</td>
225 </tr>
226 <tr>
227 <td>pageSize</td>
228 <td>data-page-size</td>
229 <td>Number</td>
230 <td>10</td>
231 <td>Cuando se habilita la paginación, inicializa el tamaño de la página.</td>
232 </tr>
233 <tr>
234 <td>pageList</td>
235 <td>data-page-list</td>
236 <td>Array</td>
237 <td>[10, 25, 50, 100, All]</td>
238 <td>Cuando se habilita la paginación, inicializa la lista de cantidad de registros por página.</td>
239 </tr>
240 <tr>
241 <td>selectItemName</td>
242 <td>data-select-item-name</td>
243 <td>String</td>
244 <td>'btSelectItem'</td>
245 <td>El nombre del radio o del checkbox.</td>
246 </tr>
247 <tr>
248 <td>smartDisplay</td>
249 <td>data-smart-display</td>
250 <td>Boolean</td>
251 <td>true</td>
252 <td>True para mostrar la páginación o la vista de tarjeta inteligentemente.</td>
253 </tr>
254 <tr>
255 <td>escape</td>
256 <td>data-escape</td>
257 <td>Boolean</td>
258 <td>false</td>
259 <td>Escapes a string for insertion into HTML,
260 replacing <code>&</code>, <code><</code>, <code>></code>,
261 <code>"</code>, <code>`</code>, and <code>'</code> characters.</td>
262 </tr>
263 <tr>
264 <td>search</td>
265 <td>data-search</td>
266 <td>Boolean</td>
267 <td>false</td>
268 <td>Habilita el campo para búsqueda.</td>
269 </tr>
270 <tr>
271 <td>searchOnEnterKey</td>
272 <td>data-search-on-enter-key</td>
273 <td>Boolean</td>
274 <td>false</td>
275 <td>El método será ejecutado hasta que la tecla Enter sea presionada.</td>
276 </tr>
277 <tr>
278 <td>strictSearch</td>
279 <td>data-strict-search</td>
280 <td>Boolean</td>
281 <td>false</td>
282 <td>Habilita la busqueda exacta.</td>
283 </tr>
284 <tr>
285 <td>searchText</td>
286 <td>data-search-text</td>
287 <td>String</td>
288 <td>''</td>
289 <td>Inicializa el campo de búsqueda con el texto especificado.</td>
290 </tr>
291 <tr>
292 <td>searchTimeOut</td>
293 <td>data-search-time-out</td>
294 <td>Number</td>
295 <td>500</td>
296 <td>Setea el tiempo de espera para iniciar la búsqueda.</td>
297 </tr>
298 <tr>
299 <td>showHeader</td>
300 <td>data-show-header</td>
301 <td>Boolean</td>
302 <td>true</td>
303 <td>False para ocultar el encabezado de la tabla.</td>
304 </tr>
305 <tr>
306 <td>showFooter</td>
307 <td>data-show-footer</td>
308 <td>Boolean</td>
309 <td>false</td>
310 <td>True para mostrar el footer.</td>
311 </tr>
312 <tr>
313 <td>showColumns</td>
314 <td>data-show-columns</td>
315 <td>Boolean</td>
316 <td>false</td>
317 <td>True para mostrar las columnas en una lista.</td>
318 </tr>
319 <tr>
320 <td>showRefresh</td>
321 <td>data-show-refresh</td>
322 <td>Boolean</td>
323 <td>false</td>
324 <td>True para mostrar el botón de refresh.</td>
325 </tr>
326 <tr>
327 <td>showToggle</td>
328 <td>data-show-toggle</td>
329 <td>Boolean</td>
330 <td>false</td>
331 <td>True para mostrar el botón de vista cambiada entre vista de tabla y vista de tarjeta.</td>
332 </tr>
333 <tr>
334 <td>showPaginationSwitch</td>
335 <td>data-show-pagination-switch</td>
336 <td>Boolean</td>
337 <td>false</td>
338 <td>True para mostrar el botón de mostrar/ocultar la paginación.</td>
339 </tr>
340 <tr>
341 <td>minimumCountColumns</td>
342 <td>data-minimum-count-columns</td>
343 <td>Number</td>
344 <td>1</td>
345 <td>la cantidad mínima de columnas que se deben mostrar.</td>
346 </tr>
347 <tr>
348 <td>idField</td>
349 <td>data-id-field</td>
350 <td>String</td>
351 <td>undefined</td>
352 <td>Indica cuál campo es el identificador.</td>
353 </tr>
354 <tr>
355 <td>uniqueId</td>
356 <td>data-unique-id</td>
357 <td>String</td>
358 <td>undefined</td>
359 <td>Indica un único id para cada fila.</td>
360 </tr>
361 <tr>
362 <td>cardView</td>
363 <td>data-card-view</td>
364 <td>Boolean</td>
365 <td>false</td>
366 <td>True para mostrar la vista de tarjeta, por ejemplo en móviles.</td>
367 </tr>
368 <tr>
369 <td>detailView</td>
370 <td>data-detail-view</td>
371 <td>Boolean</td>
372 <td>false</td>
373 <td>True para mostrar la vista detalle en la tabla.</td>
374 </tr>
375 <tr>
376 <td>detailFormatter</td>
377 <td>data-detail-formatter</td>
378 <td>Function</td>
379 <td>function(index, row) {<br>return '';<br>}</td>
380 <td>Formatee su vista detalle cuando <code>detailView</code> está seteada en <code>true</code>.</td>
381 </tr>
382 <tr>
383 <td>searchAlign</td>
384 <td>data-search-align</td>
385 <td>String</td>
386 <td>'right'</td>
387 <td>Indica cómo alinear el campo de búsqueda. Se puede usar 'left', 'right'.</td>
388 </tr>
389 <tr>
390 <td>buttonsAlign</td>
391 <td>data-buttons-align</td>
392 <td>String</td>
393 <td>'right'</td>
394 <td>Indica cómo alinear los botones de la barra de herramientas. Se puede usar 'left', 'right'.</td>
395 </tr>
396 <tr>
397 <td>toolbarAlign</td>
398 <td>data-toolbar-align</td>
399 <td>String</td>
400 <td>'left'</td>
401 <td>Indica cómo alinear la barra de herramientas customizable. Se puede usar 'left', 'right'.</td>
402 </tr>
403 <tr>
404 <td>paginationVAlign</td>
405 <td>data-pagination-v-align</td>
406 <td>String</td>
407 <td>'bottom'</td>
408 <td>Indica cómo alinear la paginación. Se puede usar: 'top', 'bottom', 'both' (coloca la paginación arriba y abajo de la tabla.</td>
409 </tr>
410 <tr>
411 <td>paginationHAlign</td>
412 <td>data-pagination-h-align</td>
413 <td>String</td>
414 <td>'right'</td>
415 <td>Indica cómo alinear la paginación. Se puede usar: 'left', 'right'.</td>
416 </tr>
417 <tr>
418 <td>paginationDetailHAlign</td>
419 <td>data-pagination-detail-h-align</td>
420 <td>String</td>
421 <td>'left'</td>
422 <td>Indica cómo alinear el detalle de la paginación. Se puede usar: 'left', 'right'.</td>
423 </tr>
424 <tr>
425 <td>paginationPreText</td>
426 <td>data-pagination-pre-text</td>
427 <td>String</td>
428 <td>'&lt;'</td>
429 <td>Indica el icono o el texto a mostrar en la paginación, el botón previous del detalle de la paginación.</td>
430 </tr>
431 <tr>
432 <td>paginationNextText</td>
433 <td>data-pagination-next-text</td>
434 <td>String</td>
435 <td>'&gt;'</td>
436 <td>Indica el icono o el texto a mostrar en la paginación, el botón next del detalle de la paginación.</td>
437 </tr>
438 <tr>
439 <td>clickToSelect</td>
440 <td>data-click-to-select</td>
441 <td>Boolean</td>
442 <td>false</td>
443 <td>True para seleccionar el checkbox o el radiobox cuando se da click sobre las filas.</td>
444 </tr>
445 <tr>
446 <td>singleSelect</td>
447 <td>data-single-select</td>
448 <td>Boolean</td>
449 <td>false</td>
450 <td>True para permirir solo un checkbox seleccionado.</td>
451 </tr>
452 <tr>
453 <td>toolbar</td>
454 <td>data-toolbar</td>
455 <td>String</td>
456 <td>undefined</td>
457 <td>Un selector jQuery que indica la barra de herramientas, por ejemplo:<br> #toolbar, .toolbar.</td>
458 </tr>
459 <tr>
460 <td>checkboxHeader</td>
461 <td>data-checkbox-header</td>
462 <td>Boolean</td>
463 <td>true</td>
464 <td>False para ocular el checkbox check-all en el encabezado de la fila.</td>
465 </tr>
466 <tr>
467 <td>maintainSelected</td>
468 <td>data-maintain-selected</td>
469 <td>Boolean</td>
470 <td>false</td>
471 <td>True para mantener las columnas después de seleccionar o cambiar entre páginas.</td>
472 </tr>
473 <tr>
474 <td>sortable</td>
475 <td>data-sortable</td>
476 <td>Boolean</td>
477 <td>true</td>
478 <td>False para deshabilitar el ordenamiento en todas las columnas.</td>
479 </tr>
480 <tr>
481 <td>silentSort</td>
482 <td>data-silent-sort</td>
483 <td>Boolean</td>
484 <td>true</td>
485 <td>Setear a <code>false</code> para ordenar los datos silenciosamente. Esta opción funciona cuando la opción sidePagination es seteada a <code>server</code>.</td>
486 </tr>
487 <tr>
488 <td>rowStyle</td>
489 <td>data-row-style</td>
490 <td>Function</td>
491 <td>{}</td>
492 <td>
493 La función formatter para aplicar el estilo de la fila, toma dos parámetros: <br>
494 row: los datos de la fila.<br>
495 index: el índice de la fila.<br>
496 Soporta clases y CSS.
497 </td>
498 </tr>
499 <tr>
500 <td>rowAttributes</td>
501 <td>data-row-attributes</td>
502 <td>Function</td>
503 <td>{}</td>
504 <td>
505 La función formatter para los atributos de la fiila, toma dos parámetros: <br>
506 row: los datos de la fila.<br>
507 index: el índice de la fila.<br>
508 Soporta cualquier atributo customizable.
509 </td>
510 </tr>
511 <tr>
512 <td>customSearch</td>
513 <td>data-custom-search</td>
514 <td>Function</td>
515 <td>$.noop</td>
516 <td>
517 The custom search function is executed instead of built-in search function, takes one parameters: <br>
518 text: the search text.<br>
519 Example usage:<br>
520 <pre>
521 function customSearch(text) {
522 //Search logic here.
523 //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
524 }
525 </pre>
526 </td>
527 </tr>
528 <tr>
529 <td>customSort</td>
530 <td>data-custom-sort</td>
531 <td>Function</td>
532 <td>$.noop</td>
533 <td>
534 The custom sort function is executed instead of built-in sort function, takes two parameters: <br>
535 sortName: the sort name.<br>
536 sortOrder: the sort order.<br>
537 Example usage:<br>
538 <pre>
539 function customSort(sortName, sortOrder) {
540 //Sort logic here.
541 //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
542 }
543 </pre>
544 </td>
545 </tr>
546 </tbody>
547 </table>