Bootstrap Table

Jun 15, 2014 in Tables 20765 views

Download

Overview
Documents

User Rating: 3.4/5 ( 6 votes)

Your Rating:

Bootstrap Table displays data in a tabular format and offers rich support to radio, checkbox, sort, pagination and so on. The table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.

Source: wenzhixin.net.cn

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script>
<script src="bootstrap-table.js"></script>

2. VIA DATA ATTRIBUTES

<table data-toggle="table" data-url="data.json">
    <thead>
        ...
    </thead>
</table>

3. VIA JAVASCRIPT

$('#table').bootstrapTable({
    url: 'data.json'
});

4. TABLE PROPERTIES

Name	Type	Description	Default
classes	String	The class name of table.	table table-hover
height	Number	The height of table.	undefined
undefinedText	String	Defines the default undefined text.	-
striped	Boolean	True to stripe the rows.	false
sortName	String	Defines which column can be sorted.	undefined
sortOrder	String	Defines the column sort order, can only be "asc" or "desc".	asc
columns	Array	The table columns config object, see column properties for more details.	[]
data	Array	The data to be loaded.	[]
method	String	The method type to request remote data.	get
url	String	A URL to request data from remote site.	undefined
queryParams	Object	When request remote data, sending additional parameters also.	{}
pagination	Boolean	True to show a pagination toolbar on datagrid bottom.	false
sidePagination	String	Defines the side pagination of table, can only be "client" or "server".	client
totalRows	Number	Defines the total rows of table, you need to set this option when the sidePagination option is set to "server".	0
pageNumber	Number	When set pagination property, initialize the page number.	1
pageSize	Number	When set pagination property, initialize the page size.	10
pageList	Array	When set pagination property, initialize the page size selecting list.	[10, 20, 30, 40, 50]

5. COLUMN PROPERTIES

Name	Type	Description	Default
radio	Boolean	True to show a radio. The radio column has fixed width.	false
checkbox	Boolean	True to show a checkbox. The checkbox column has fixed width.	false
field	String	The column field name.	undefined
title	String	The column title text.	undefined
align	String	Indicate how to align the column data. "left", "right", "center" can be used.	undefined
valign	String	Indicate how to align the cell data. "top", "middle", "bottom" can be used.	undefined
width	Number	The width of column. If not defined, the width will auto expand to fit its contents.	undefined
sortable	Boolean	True to allow the column can be sorted.	false
order	String	The default sort order, can only be "asc" or "desc".	asc
formatter	Function	The cell formatter function, take two parameters: value: the field value. row: the row record data.	undefined
sorter	Function	The custom field sort function that used to do local sorting, take two parameters: a: the first field value. b: the second field value.	undefined

6. EVENTS

Name	Parameter	Description
onClickRow	row	Fires when user click a row, the parameters contains: row: the record corresponding to the clicked row.
onSort	name, order	Fires when user sort a column, the parameters contains: name: the sort column field name order: the sort column order.
onCheck	row	Fires when user check a row, the parameters contains: row: the record corresponding to the clicked row.
onUncheck	row	Fires when user uncheck a row, the parameters contains: row: the record corresponding to the clicked row.
onCheckAll	rows	Fires when user check all rows.
onUncheckAll	rows	Fires when user uncheck all rows.

7. METHODS

Name	Parameter	Description
getSelections	none	Return all selected rows, when no record selected, am empty array will return.
load	data	Load the data to table.
append	data	Append the data to table.
mergeCells	options	Merge some cells to one cell, the options contains following properties:
		index: the row index.
		field: the field name.
		rowspan: the rowspan count to be merged.
		colspan: the colspan count to be merged.
checkAll	none	Check all current page rows.
uncheckAll	none	Uncheck all current page rows.
destroy	none	Destroy the bootstrap table.

JS Tutorial

Bootstrap Table

Related Articles