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 The table options are defined in `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>Name</th>
16 <th>Attribute</th>
17 <th>Type</th>
18 <th>Default</th>
19 <th>Description</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>Activate bootstrap table without writing 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>The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style.</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>The class name of the td elements which are sorted.</td>
43 </tr>
44 <tr>
45 <td>height</td>
46 <td>data-height</td>
47 <td>Number</td>
48 <td>undefined</td>
49 <td>The height of table.</td>
50 </tr>
51 <tr>
52 <td>undefinedText</td>
53 <td>data-undefined-text</td>
54 <td>String</td>
55 <td>'-'</td>
56 <td>Defines the default undefined text.</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 to stripe the rows.</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>Defines which column will be sorted.</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>Defines the column sort order, can only be 'asc' or '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>Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'glyphicon' is used. </td>
92 </tr>
93 <tr>
94 <td>iconSize</td>
95 <td>data-icon-size</td>
96 <td>String</td>
97 <td>undefined</td>
98 <td>Defines icon size: <ul><li>undefined => btn</li><li>xs => btn-xs</li><li>sm => btn-sm</li><li>lg => btn-lg</li></ul>
99 </td>
100 </tr>
101 <tr>
102 <td>buttonsClass</td>
103 <td>data-buttons-class</td>
104 <td>String</td>
105 <td>'default'</td>
106 <td>Defines the Bootstrap class (added after 'btn-') of table buttons: EX: 'primary', 'danger', 'warning'...</td>
107 </tr>
108 <tr>
109 <td>icons</td>
110 <td>data-icons</td>
111 <td>Object</td>
112 <td>{<br/>
113 &nbsp;&nbsp;<i>paginationSwitchDown:</i> 'glyphicon-collapse-down icon-chevron-down',<br/>
114 &nbsp;&nbsp;<i>paginationSwitchUp:</i> 'glyphicon-collapse-up icon-chevron-up',<br/>
115 &nbsp;&nbsp;<i>refresh:</i> 'glyphicon-refresh icon-refresh',<br/>
116 &nbsp;&nbsp;<i>toggle:</i> 'glyphicon-list-alt icon-list-alt',<br/>
117 &nbsp;&nbsp;<i>columns:</i> 'glyphicon-th icon-th',<br/>
118 &nbsp;&nbsp;<i>detailOpen:</i> 'glyphicon-plus icon-plus',<br/>
119 &nbsp;&nbsp;<i>detailClose:</i> 'glyphicon-minus icon-minus'<br/>
120 }
121 </td>
122 <td>Defines icons used in the toolbar, pagination, and details view.</td>
123 </tr>
124 <tr>
125 <td>columns</td>
126 <td>-</td>
127 <td>Array</td>
128 <td>[]</td>
129 <td>The table columns config object, see column properties for more details.
130 </td>
131 </tr>
132 <tr>
133 <td>data</td>
134 <td>-</td>
135 <td>Array</td>
136 <td>[]</td>
137 <td>The data to be loaded.</td>
138 </tr>
139 <tr>
140 <td>dataField</td>
141 <td>data-data-field</td>
142 <td>String</td>
143 <td>'rows'</td>
144 <td>Key in incoming json containing rows data list.</td>
145 </tr>
146 <tr>
147 <td>totalField</td>
148 <td>data-total-field</td>
149 <td>String</td>
150 <td>'total'</td>
151 <td>Key in incoming json containing "total" data .</td>
152 </tr>
153 <tr>
154 <td>ajax</td>
155 <td>data-ajax</td>
156 <td>Function</td>
157 <td>undefined</td>
158 <td>A method to replace ajax call. Should implement the same API as jQuery ajax method.</td>
159 </tr>
160 <tr>
161 <td>method</td>
162 <td>data-method</td>
163 <td>String</td>
164 <td>'get'</td>
165 <td>The method type to request remote data.</td>
166 </tr>
167 <tr>
168 <td>url</td>
169 <td>data-url</td>
170 <td>String</td>
171 <td>undefined</td>
172 <td>
173 A URL to request data from remote site.
174 <br/>Note that the required server response format is different depending on whether the 'sidePagination'
175 option is specified. See the following examples:
176 <ul>
177 <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data1.json">Without server-side pagination</a></li>
178 <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json">With server-side pagination</a></li>
179 </ul>
180 </td>
181 </tr>
182 <tr>
183 <td>cache</td>
184 <td>data-cache</td>
185 <td>Boolean</td>
186 <td>true</td>
187 <td>False to disable caching of AJAX requests.</td>
188 </tr>
189 <tr>
190 <td>contentType</td>
191 <td>data-content-type</td>
192 <td>String</td>
193 <td>'application/json'</td>
194 <td>The contentType of request remote data.</td>
195 </tr>
196 <tr>
197 <td>dataType</td>
198 <td>data-data-type</td>
199 <td>String</td>
200 <td>'json'</td>
201 <td>The type of data that you are expecting back from the server.</td>
202 </tr>
203 <tr>
204 <td>ajaxOptions</td>
205 <td>data-ajax-options</td>
206 <td>Object</td>
207 <td>{}</td>
208 <td>Additional options for submit ajax request. List of values: <a href="http://api.jquery.com/jQuery.ajax">http://api.jquery.com/jQuery.ajax</a>.</td>
209 </tr>
210 <tr>
211 <td>queryParams</td>
212 <td>data-query-params</td>
213 <td>Function</td>
214 <td>function(params) {<br>return params;<br>}</td>
215 <td>
216 When requesting remote data, you can send additional parameters by modifying queryParams.
217 If queryParamsType = 'limit', the params object contains: <br>
218 limit, offset, search, sort, order
219 Else, it contains: <br>
220 pageSize, pageNumber, searchText, sortName, sortOrder. <br>
221 Return false to stop request.
222 </td>
223 </tr>
224 <tr>
225 <td>queryParamsType</td>
226 <td>data-query-params-type</td>
227 <td>String</td>
228 <td>'limit'</td>
229 <td>Set 'limit' to send query params width RESTFul type.</td>
230 </tr>
231 <tr>
232 <td>responseHandler</td>
233 <td>data-response-handler</td>
234 <td>Function</td>
235 <td>function(res) {<br>return res;<br>}</td>
236 <td>
237 Before load remote data, handler the response data format, the parameters object contains: <br>
238 res: the response data.
239 </td>
240 </tr>
241 <tr>
242 <td>pagination</td>
243 <td>data-pagination</td>
244 <td>Boolean</td>
245 <td>false</td>
246 <td>True to show a pagination toolbar on table bottom.</td>
247 </tr>
248 <tr>
249 <td>paginationLoop</td>
250 <td>data-pagination-loop</td>
251 <td>Boolean</td>
252 <td>true</td>
253 <td>True to enable pagination continuous loop mode.</td>
254 </tr>
255 <tr>
256 <td>onlyInfoPagination</td>
257 <td>data-only-info-pagination</td>
258 <td>Boolean</td>
259 <td>false</td>
260 <td>True to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.</td>
261 </tr>
262 <tr>
263 <td>sidePagination</td>
264 <td>data-side-pagination</td>
265 <td>String</td>
266 <td>'client'</td>
267 <td>
268 Defines the side pagination of table, can only be 'client' or 'server'.
269 Using 'server' side requires either setting the 'url' or 'ajax' option.
270 <br/>Note that the required server response format is different depending on whether
271 the 'client' or 'server' option is specified. See the following examples:
272 <ul>
273 <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data1.json">Without server-side pagination</a></li>
274 <li><a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json">With server-side pagination</a></li>
275 </ul>
276 </td>
277 </tr>
278 <tr>
279 <td>pageNumber</td>
280 <td>data-page-number</td>
281 <td>Number</td>
282 <td>1</td>
283 <td>When set pagination property, initialize the page number.</td>
284 </tr>
285 <tr>
286 <td>pageSize</td>
287 <td>data-page-size</td>
288 <td>Number</td>
289 <td>10</td>
290 <td>When set pagination property, initialize the page size.</td>
291 </tr>
292 <tr>
293 <td>pageList</td>
294 <td>data-page-list</td>
295 <td>Array</td>
296 <td>[10, 25, 50, 100]</td>
297 <td>When set pagination property, initialize the page size selecting list. If you include the 'All' option, all the records will be shown in your table.</td>
298 </tr>
299 <tr>
300 <td>selectItemName</td>
301 <td>data-select-item-name</td>
302 <td>String</td>
303 <td>'btSelectItem'</td>
304 <td>The name of radio or checkbox input.</td>
305 </tr>
306 <tr>
307 <td>smartDisplay</td>
308 <td>data-smart-display</td>
309 <td>Boolean</td>
310 <td>true</td>
311 <td>True to display pagination or card view smartly.</td>
312 </tr>
313 <tr>
314 <td>escape</td>
315 <td>data-escape</td>
316 <td>Boolean</td>
317 <td>false</td>
318 <td>Escapes a string for insertion into HTML,
319 replacing <code>&</code>, <code><</code>, <code>></code>,
320 <code>"</code>, <code>`</code>, and <code>'</code> characters.</td>
321 </tr>
322 <tr>
323 <td>search</td>
324 <td>data-search</td>
325 <td>Boolean</td>
326 <td>false</td>
327 <td>Enable the search input.</td>
328 </tr>
329 <tr>
330 <td>searchOnEnterKey</td>
331 <td>data-search-on-enter-key</td>
332 <td>Boolean</td>
333 <td>false</td>
334 <td>The search method will be executed until the Enter key is pressed.</td>
335 </tr>
336 <tr>
337 <td>strictSearch</td>
338 <td>data-strict-search</td>
339 <td>Boolean</td>
340 <td>false</td>
341 <td>Enable the strict search.</td>
342 </tr>
343 <tr>
344 <td>searchText</td>
345 <td>data-search-text</td>
346 <td>String</td>
347 <td>''</td>
348 <td>When set search property, initialize the search text.</td>
349 </tr>
350 <tr>
351 <td>searchTimeOut</td>
352 <td>data-search-time-out</td>
353 <td>Number</td>
354 <td>500</td>
355 <td>Set timeout for search fire.</td>
356 </tr>
357 <tr>
358 <td>trimOnSearch</td>
359 <td>data-trim-on-search</td>
360 <td>Boolean</td>
361 <td>true</td>
362 <td>True to trim spaces in search field.</td>
363 </tr
364 <tr>
365 <td>showHeader</td>
366 <td>data-show-header</td>
367 <td>Boolean</td>
368 <td>true</td>
369 <td>False to hide the table header.</td>
370 </tr>
371 <tr>
372 <td>showFooter</td>
373 <td>data-show-footer</td>
374 <td>Boolean</td>
375 <td>false</td>
376 <td>True to show the summary footer row.</td>
377 </tr>
378 <tr>
379 <td>showColumns</td>
380 <td>data-show-columns</td>
381 <td>Boolean</td>
382 <td>false</td>
383 <td>True to show the columns drop down list.</td>
384 </tr>
385 <tr>
386 <td>showRefresh</td>
387 <td>data-show-refresh</td>
388 <td>Boolean</td>
389 <td>false</td>
390 <td>True to show the refresh button.</td>
391 </tr>
392 <tr>
393 <td>showToggle</td>
394 <td>data-show-toggle</td>
395 <td>Boolean</td>
396 <td>false</td>
397 <td>True to show the toggle button to toggle table / card view.
398 </td>
399 </tr>
400 <tr>
401 <td>showPaginationSwitch</td>
402 <td>data-show-pagination-switch</td>
403 <td>Boolean</td>
404 <td>false</td>
405 <td>True to show the pagination switch button.</td>
406 </tr>
407 <tr>
408 <td>minimumCountColumns</td>
409 <td>data-minimum-count-columns</td>
410 <td>Number</td>
411 <td>1</td>
412 <td>The minimum number of columns to hide from the columns drop down list.
413 </td>
414 </tr>
415 <tr>
416 <td>idField</td>
417 <td>data-id-field</td>
418 <td>String</td>
419 <td>undefined</td>
420 <td>Indicate which field is an identity field.</td>
421 </tr>
422 <tr>
423 <td>uniqueId</td>
424 <td>data-unique-id</td>
425 <td>String</td>
426 <td>undefined</td>
427 <td>Indicate an unique identifier for each row.</td>
428 </tr>
429 <tr>
430 <td>cardView</td>
431 <td>data-card-view</td>
432 <td>Boolean</td>
433 <td>false</td>
434 <td>True to show card view table, for example mobile view.</td>
435 </tr>
436 <tr>
437 <td>detailView</td>
438 <td>data-detail-view</td>
439 <td>Boolean</td>
440 <td>false</td>
441 <td>True to show detail view table.</td>
442 </tr>
443 <tr>
444 <td>detailFormatter</td>
445 <td>data-detail-formatter</td>
446 <td>Function</td>
447 <td>function(index, row, element) {<br>return '';<br>}</td>
448 <td>Format your detail view when <code>detailView</code> is set to <code>true</code>. Return a String and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.</td>
449 </tr>
450 <tr>
451 <td>searchAlign</td>
452 <td>data-search-align</td>
453 <td>String</td>
454 <td>'right'</td>
455 <td>Indicate how to align the search input. 'left', 'right' can be used.</td>
456 </tr>
457 <tr>
458 <td>buttonsAlign</td>
459 <td>data-buttons-align</td>
460 <td>String</td>
461 <td>'right'</td>
462 <td>Indicate how to align the toolbar buttons. 'left', 'right' can be used.</td>
463 </tr>
464 <tr>
465 <td>toolbarAlign</td>
466 <td>data-toolbar-align</td>
467 <td>String</td>
468 <td>'left'</td>
469 <td>Indicate how to align the custom toolbar. 'left', 'right' can be used.</td>
470 </tr>
471 <tr>
472 <td>paginationVAlign</td>
473 <td>data-pagination-v-align</td>
474 <td>String</td>
475 <td>'bottom'</td>
476 <td>Indicate how to align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom) can be used.</td>
477 </tr>
478 <tr>
479 <td>paginationHAlign</td>
480 <td>data-pagination-h-align</td>
481 <td>String</td>
482 <td>'right'</td>
483 <td>Indicate how to align the pagination. 'left', 'right' can be used.</td>
484 </tr>
485 <tr>
486 <td>paginationDetailHAlign</td>
487 <td>data-pagination-detail-h-align</td>
488 <td>String</td>
489 <td>'left'</td>
490 <td>Indicate how to align the pagination detail. 'left', 'right' can be used.</td>
491 </tr>
492 <tr>
493 <td>paginationPreText</td>
494 <td>data-pagination-pre-text</td>
495 <td>String</td>
496 <td>'&lsaquo;'</td>
497 <td>Indicate the icon or text to be shown in the pagination detail, the previous button.</td>
498 </tr>
499 <tr>
500 <td>paginationNextText</td>
501 <td>data-pagination-next-text</td>
502 <td>String</td>
503 <td>'&rsaquo;'</td>
504 <td>Indicate the icon or text to be shown in the pagination detail, the next button.</td>
505 </tr>
506 <tr>
507 <td>clickToSelect</td>
508 <td>data-click-to-select</td>
509 <td>Boolean</td>
510 <td>false</td>
511 <td>True to select checkbox or radiobox when clicking rows.</td>
512 </tr>
513 <tr>
514 <td>singleSelect</td>
515 <td>data-single-select</td>
516 <td>Boolean</td>
517 <td>false</td>
518 <td>True to allow checkbox selecting only one row.</td>
519 </tr>
520 <tr>
521 <td>toolbar</td>
522 <td>data-toolbar</td>
523 <td>String | Node</td>
524 <td>undefined</td>
525 <td>
526 A jQuery selector that indicates the toolbar, for example:<br>
527 #toolbar, .toolbar, or a DOM node.
528 </td>
529 </tr>
530 <tr>
531 <td>checkboxHeader</td>
532 <td>data-checkbox-header</td>
533 <td>Boolean</td>
534 <td>true</td>
535 <td>False to hide check-all checkbox in header row.</td>
536 </tr>
537 <tr>
538 <td>maintainSelected</td>
539 <td>data-maintain-selected</td>
540 <td>Boolean</td>
541 <td>false</td>
542 <td>True to maintain selected rows on change page and search.</td>
543 </tr>
544 <tr>
545 <td>sortable</td>
546 <td>data-sortable</td>
547 <td>Boolean</td>
548 <td>true</td>
549 <td>False to disable sortable of all columns.</td>
550 </tr>
551 <tr>
552 <td>silentSort</td>
553 <td>data-silent-sort</td>
554 <td>Boolean</td>
555 <td>true</td>
556 <td>Set <code>false</code> to sort the data silently. This options works when the sidePagination option is set to <code>server</code>.</td>
557 </tr>
558 <tr>
559 <td>rowStyle</td>
560 <td>data-row-style</td>
561 <td>Function</td>
562 <td>{}</td>
563 <td>
564 The row style formatter function, takes two parameters: <br>
565 row: the row record data.<br>
566 index: the row index.<br>
567 Support classes or css. Example usage:<br>
568 <pre>
569 function rowStyle(row, index) {
570 return {
571 classes: 'text-nowrap another-class',
572 css: {"color": "blue", "font-size": "50px"}
573 };
574 }
575 </pre>
576 </td>
577 </tr>
578 <tr>
579 <td>rowAttributes</td>
580 <td>data-row-attributes</td>
581 <td>Function</td>
582 <td>{}</td>
583 <td>
584 The row attribute formatter function, takes two parameters: <br>
585 row: the row record data.<br>
586 index: the row index.<br>
587 Support all custom attributes.
588 </td>
589 </tr>
590 <tr>
591 <td>customSearch</td>
592 <td>data-custom-search</td>
593 <td>Function</td>
594 <td>$.noop</td>
595 <td>
596 The custom search function is executed instead of built-in search function, takes one parameters: <br>
597 text: the search text.<br>
598 Example usage:<br>
599 <pre>
600 function customSearch(text) {
601 //Search logic here.
602 //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
603 }
604 </pre>
605 </td>
606 </tr>
607 <tr>
608 <td>customSort</td>
609 <td>data-custom-sort</td>
610 <td>Function</td>
611 <td>$.noop</td>
612 <td>
613 The custom sort function is executed instead of built-in sort function, takes two parameters: <br>
614 sortName: the sort name.<br>
615 sortOrder: the sort order.<br>
616 Example usage:<br>
617 <pre>
618 function customSort(sortName, sortOrder) {
619 //Sort logic here.
620 //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
621 }
622 </pre>
623 </td>
624 </tr>
625 <tr>
626 <td>locale</td>
627 <td>data-locale</td>
628 <td>String</td>
629 <td>undefined</td>
630 <td>
631 Sets the locale to use (i.e. <code>'fr-CA'</code>). Locale files must be pre-loaded.
632 Allows for fallback locales, if loaded, in the following order:<br>
633 <ol>
634 <li>First tries for the locale as specified,</li>
635 <li>Then tries the locale with <code>'_'</code> translated to
636 <code>'-'</code> and the region code upper cased,</li>
637 <li>Then tries the the short locale code (i.e. <code>'fr'</code> instead of <code>'fr-CA'</code>),</li>
638 <li>And finally will use the last locale file loaded (or the default locale if no locales loaded).</li>
639 </ol>
640 If left undfined or an empty string, uses the last locale loaded (or <code>'en-US'</code>
641 if no locale files loaded).
642 </td>
643 </tr>
644 <tr>
645 <td>footerStyle</td>
646 <td>data-footer-style</td>
647 <td>Function</td>
648 <td>{}</td>
649 <td>
650 The footer style formatter function, takes two parameters: <br>
651 row: the row record data.<br>
652 index: the row index.<br>
653 Support classes or css. Example usage:<br>
654 <pre>
655 function footerStyle(value, row, index) {
656 return {
657 css: { "font-weight": "bold" }
658 };
659 }
660 </pre>
661 </td>
662 </tr>
663 </tbody>
664 </table>