Use API:
AJAX:
Use url, method, cache, contentType, dataType, queryParams, queryParamsType, responseHandler options to set the AJAX request and response params.
Basic Table
Use data-toggle="table" to activate bootstrap table without writing JavaScript.
| Item ID | Item Name | Item Price |
|---|
Transform Table
Transform table from an existing, unformatted html table.
| Item ID | Item Name | Item Price |
|---|---|---|
| 1 | Item 1 | $1 |
| 2 | Item 2 | $2 |
| 3 | Item 3 | $3 |
| 4 | Item 4 | $4 |
| 5 | Item 5 | $5 |
Table Style
Use height, classes, striped, rowStyle options and class, width, cellStyle column options to set the styles of bootstrap table.
| Item ID | Item Name | Item Price |
|---|
Aligning Columns
Use align, halign and valign options to set the alignment of the columns and their header.
| Item ID | Item Name | Item Price |
|---|
Sort Table
Basic
Use sortName, sortOrder, sortable options, and sortable, order column options to set the basic sort of bootstrap table.
| Item ID | Item Name | Item Price |
|---|
Custom
Use sorter column option to define the custom sort of bootstrap table.
| Item ID | Item Name | Item Price |
|---|
Format Table
Use formatter column option to format the display of bootstrap table column.
| Item ID | Item Name | Item Price |
|---|
Hide Header Table
Use showHeader: false to hide the header of bootstrap table.
| Item Name | Item Price |
|---|
Show Columns Table
Basic
Use showColumns, minimumCountColumns options, and visible, switchable column options to show the columns menu list use to switch.
| Name | Price | Columns1 | Columns2 | Columns3 | Columns4 |
|---|
Large Columns
Bootstrap table support large columns, it will auto to show the horizontal scroll bar.
Card View Table
Use cardView: true option to show Card View.
| Name | License | Description | Url |
|---|
Table Select
Radio
Use clickToSelect, selectItemName options and radio column option to show a radio select table.
| Item ID | Item Name | Item Price |
|---|
Checkbox
Use clickToSelect option and checkbox column option to show a checkbox select table.
| Item ID | Item Name | Item Price |
|---|
Disabled Checkbox
Use checkboxHeader, checkboxEnable options and formatter column option to disabled select input.
| Item ID | Item Name | Item Price |
|---|
Single Checkbox
Use singleSelect option to allow checkbox selecting only one row..
| Item ID | Item Name | Item Price |
|---|
Table Toolbar
Basic
Use search, showColumns, showRefresh, showToggle options to show the basic toolbars.
| Item ID | Item ID | Item Name | Item Price |
|---|
Custom
Use toolbar option to define the custom toolbars.
| Item ID | Item Name | Item Price |
|---|
Pagination Table
Use pagination, sidePagination, pageNumber, pageSize, pageList options to set the pagination options.
Client Side
| Item ID | Item Name | Item Price |
|---|
Server Side
Use sidePagination: 'server' option to define the server side pagination of table.
| Item ID | Item Name | Item Price |
|---|
Table Events
Basic Events
| Item ID | Item Name | Item Price |
|---|
Column Events
Use formatter, events column option to define the custom events.
| Item ID | Item Name | Item Price | Item Operate |
|---|
Table methods
The calling method syntax: $('#table').bootstrapTable('method', parameter);.
| Item ID | Item Name | Item Price |
|---|
Via JavaScript
JSFiddle Examples