jsFiddle examples
wenzhixin opened this issue · 9 comments
wenzhixin commented
Basic
- Table from html: http://jsfiddle.net/wenyi/e3nk137y/44345/
- Table from data: http://jsfiddle.net/wenyi/e3nk137y/44346/
- Table from url: http://jsfiddle.net/wenyi/e3nk137y/44348/
- Full example(v3): http://jsfiddle.net/wenyi/e3nk137y/25370/
- Full example(v4): http://jsfiddle.net/wenyi/e3nk137y/25378/
Style
- Classes: http://jsfiddle.net/wenyi/e3nk137y/15/
- RowStyle: http://jsfiddle.net/wenyi/e3nk137y/16/
- CellStyle: http://jsfiddle.net/wenyi/30sx4h3t/
- #1608 Width problem: http://jsfiddle.net/wenyi/8jL67Lcx/11/
Align
Sort
- Basic Sort: http://jsfiddle.net/wenyi/e3nk137y/18/
- Custom Sort: http://jsfiddle.net/e3nk137y/4248/
- #821 Sort by custom data attribute: http://jsfiddle.net/e3nk137y/1434/
- #1373, #1777 Custom sort with
null/undefined
value: http://jsfiddle.net/wenyi/88Lpwoy1/1/ - #1794 Set the global sortable defaults for the table: http://jsfiddle.net/fsaruk7b/7/
- #461 Html sort: http://jsfiddle.net/wenyi/e1ypfk3b/2/
Format
- Basic format: http://jsfiddle.net/wenyi/e3nk137y/21/
- Show current row count: http://jsfiddle.net/DominikAngerer/yx275pyd/2/
Hide Header
- Hide Header: http://jsfiddle.net/wenyi/e3nk137y/22/
Columns
- Basic Columns: http://jsfiddle.net/wenyi/e3nk137y/24/
- Large Columns: http://jsfiddle.net/wenyi/e3nk137y/26/
Card View
- Card View: http://jsfiddle.net/wenyi/e3nk137y/27/
Select
- Radio Select: http://jsfiddle.net/wenyi/e3nk137y/29/
- Checkbox Select: http://jsfiddle.net/wenyi/e3nk137y/30/
- Disabled Checkbox: http://jsfiddle.net/wenyi/e3nk137y/31/
- Single Checkbox: http://jsfiddle.net/wenyi/e3nk137y/32/
- #1776 Select the row without radio or checkbox: http://jsfiddle.net/wenyi/e3nk137y/3814/
Toolbar
- Basic Toolbar: http://jsfiddle.net/wenyi/e3nk137y/33/
- Custom Toolbar: http://jsfiddle.net/wenyi/e3nk137y/34/
Group
- #1919 Group headers via JavaScript: http://jsfiddle.net/e3nk137y/4320/
- #957 Transfer from rowspan / colspan table: http://jsfiddle.net/wenyi/e3nk137y/4761/
Detail View
- Sub Table: http://jsfiddle.net/wenyi/e3nk137y/18138/
- #3270: Expand detail auto collapse other rows : http://jsfiddle.net/wenyi/e3nk137y/18029/
- #3168: Animate with collapseRow and expandRow: http://jsfiddle.net/wenyi/e3nk137y/18137/
Pagination
- Client Side: http://jsfiddle.net/wenyi/e3nk137y/42/
- Server Side: http://jsfiddle.net/wenyi/z50x2d7t/1/
- #3497 Remove pagination detail: http://jsfiddle.net/wenyi/4r6g4cfu/848/
Bootstrap4
- Basic Toolbar: http://jsfiddle.net/wenyi/e3nk137y/24073/
Events
- Basic Events: http://jsfiddle.net/e3nk137y/2106/
- Column Events: http://jsfiddle.net/wenyi/e3nk137y/39/
Methods
- Load(client): http://jsfiddle.net/wenyi/e3nk137y/11458/
- Load(server): http://jsfiddle.net/wenyi/e3nk137y/11459/
- Reset View: http://jsfiddle.net/wenyi/e3nk137y/40/
- checkInvert: https://jsfiddle.net/bxwywcx2/5/
- ScrollTo a specific row number: http://jsfiddle.net/wenyi/yf0u35jL/4/
- #1791
updateFormatText
method: http://jsfiddle.net/e3nk137y/3876/
Locales
- #2019 change formatLoadingMessage: http://jsfiddle.net/djhvscf/e3nk137y/4839/
Editable
- Editable: http://jsfiddle.net/wenyi/e3nk137y/28/light/
- Editable-2: http://jsfiddle.net/wenyi/e3nk137y/3793/
- #1357 Inline Editable: http://jsfiddle.net/wenyi/e3nk137y/6491/
- #1697 Jump from editable field to another: http://jsfiddle.net/wenyi/e3nk137y/3744/
- #1865 Editable with address type: http://jsfiddle.net/e3nk137y/4232/
- #2109 Use editable Select2 type: http://jsfiddle.net/wenyi/e3nk137y/6515/
- #2314 Use editable and formatter: https://jsfiddle.net/fsauter/5shvjxej/
Export
- Basic export: http://jsfiddle.net/e3nk137y/4144/
- #1001 Export options using attribute: http://jsfiddle.net/marcelk/6gd9w79u/
- #1797: Use iconSize: http://jsfiddle.net/e3nk137y/4225/
- #2234: Custom export link: http://jsfiddle.net/wenyi/wc0zLpef/1/.
- #3436: Add icon for export extension using fa: http://jsfiddle.net/wenyi/e3nk137y/17639/
Context Menu
- contextmenu: https://jsfiddle.net/bxwywcx2/5/
Filter Control
- Filter Control: https://jsfiddle.net/wenyi/e3nk137y/18165/
More example
- #864 Table with tooltip and popover: http://jsfiddle.net/djhvscf/8vgk5626/14/
- Card view text drop problem: http://jsfiddle.net/wenyi/e3nk137y/2667/
- Get the check/uncheck index: http://jsfiddle.net/wenyi/e3nk137y/3178/
- Get column field has been clicked: http://jsfiddle.net/wenyi/e3nk137y/3179/
- With other jQuery plugin multiple-select: http://jsfiddle.net/wenyi/e3nk137y/3817/
- #1804 Use strict search: http://jsfiddle.net/e3nk137y/3858/
- #1810 Custom search placeholder: http://jsfiddle.net/e3nk137y/3872/
- #1768 Init columns after receiving remote data: https://jsfiddle.net/1ehuLmw0/1/
- #553 fiterBy range: http://jsfiddle.net/e3nk137y/1010/
- #2227 Custom tooltip style: http://jsfiddle.net/wenyi/e3nk137y/6490/
- #2871 Update row classes of using uniqueId: http://jsfiddle.net/wenyi/e3nk137y/11463/
- #3359 Check the final post-body event: http://jsfiddle.net/wenyi/e3nk137y/17778/
- #3009: Field name contains a '.' symbol: http://jsfiddle.net/6bz80h6y/4/
- #3526: Break long single word in td: http://jsfiddle.net/wenyi/4g2wdp2m/2/
mastermike14 commented
can you add these to the site?
wenzhixin commented
saquibm commented
How to auto refresh JSON content in background? If I am not using data-url function but instead using $getJson method.
wenzhixin commented
@saquibm You can use refresh
method to do this:
$table.bootstrapTable('refresh', {silent: true})
danielnjoo commented
These are no longer on the link above, gives 404... spent me a long time to find this, but solved 99% of my problems!
djhvscf commented
guomengtao commented
try use English learning bootstrap-table
ferrinweb commented
Hi, there are some error log in jsFiddle example page.
Refused to apply style from 'https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
wenzhixin commented
Please use our Online Editor instead.