Bootstrap Data Table is a jQuery Plugin with responsive, dynamic, extendable, multifunctional, and profoundly adjustable jQuery information table module for Bootstrap (5/4/3/2), Bulma, Foundation, Materialize, and Semantic systems.
Table of Contents
Features:
- Dynamic data rendering via AJAX.
- Data filtering.
- Data sorting.
- Data editing.
- Table pagination.
- Show/hide specific columns.
- Fixed table header.
- Checkable table rows.
- Expandable and collapsible table rows.
- Allows to toggle between card view and detail view.
- Exports data to JSON, XML, CSV, TXT, SQL, and Excel.
- Useful extensions.
- Tons of useful options, methods and events.
- Supports 45+ languages.
- 5 built-in themes: Bootstrap, Bulma, Foundation, Materialize, and Semantic.
How to usage:
1. Include the Bootstrap Table plugin’s files and extensions of your choice in your Bootstrap project.
<link href="/bootstrap-table.min.css" rel="stylesheet">
<script src="3.5.1/jquery.min.js"></script>
<script src="/tableExport.min.js"></script>
<script src="/bootstrap-table.min.js"></script>
<script src="/bootstrap-table-locale-all.min.js"></script>
<script src="/bootstrap-table-export.min.js"></script>
2. Load languages you prefer.
<script src="/bootstrap-table-en-US.min.js"></script>
3. Turns a standard HTML table into a data table using the data-toggle="table" attribute.
<table class="table" data-toggle="table">
<thead>
<tr>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@<a href="#">twitter</a></td>
</tr>
</tbody>
</table>
4. To load tabular data from an external JSON file:
<table class="table" data-toggle="table" data-url="data.json">
<thead>
<tr>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
</table>
5. You can also initialize the data table and define the tabular data in the JavaScript as these:
<table class="table" id="example">
</table>
<script>
$('#example').bootstrapTable({
columns: [{
field: 'first',
title: 'First Name'
}, {
field: 'last',
title: 'Last Name'
}, {
field: 'handle',
title: 'Handle'
}],
data: [{
first: 'Mark',
last: 'Otto',
handle: '@mdo'
},
...
});
</script>
6. Full plugin options to customize your data table.
$('#example').bootstrapTable({
// height
height: undefined,
// table classes
classes: 'table table-hover',
// add custom buttons to the button bar
buttons: {},
// thead classes
theadClasses: '',
// header style
headerStyle: function headerStyle(column) {
return {};
},
// undefined text
undefinedText: '-',
// local file
locale: undefined,
// enables virtual scroll
virtual<a href="http://www.jquerypost.com/tag/scroll/">Scroll</a>: false,
virtualScrollItemHeight: undefined,
// enable sortable
sortable: true,
// enable silent sort
silentSort: true,
// enable stable sort
sortStable: false,
// class name of sortable cell
sortClass: undefined,
// custom sort name
sortName: undefined,
// or desc
sortOrder: 'asc',
// reset the sort on third click
sortReset: false,
// remember order direction
rememberOrder: false,
// enable server-side sort
serverSort: true,
// striped rows
striped: false,
// custom sort function
customSort: $.noop,
// table columns
columns: [[]],
// tabular data
data: [],
// filter options
filterOptions: {
filterAlgorithm: 'and'
},
// total field
totalField: 'total',
// total not filtered
totalNotFilteredField: 'totalNotFiltered',
// data field
dataField: 'rows',
// support server side pagination
footerField: 'footer',
// AJAX options
url: undefined,
method: 'get',
ajax: undefined,
cache: true,
contentType: 'application/json',
dataType: 'json',
ajaxOptions: {},
queryParams: function (params) {
return params;
},
queryParamsType: 'limit', // undefined
responseHandler: function (res) {
return res;
},
// pagination options
pagination: false,
onlyInfoPagination: false,
showExtendedPagination: false,
paginationLoop: true,
sidePagination: 'client', // client or server
totalRows: 0, // server side need to set
totalNotFiltered: 0,
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: '‹',
paginationNextText: '›',
paginationSuccessivelySize: 5, // Maximum successively number of pages in a row
paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
paginationUseIntermediate: false, // Calculate intermediate pages for quick access
showPaginationSwitch: false,
// live search options
search: false,
searchHighlight: false,
searchOnEnterKey: false,
strictSearch: false,
searchSelector: false,
searchAlign: 'right',
visibleSearch: false
showButtonIcons: true,
showButtonText: false,
showSearchButton: false,
showSearchClearButton: false,
trimOnSearch: true,
searchTimeOut: 500,
searchText: '',
customSearch: $.noop,
searchAccentNeutralise: false,
// name of radio or checkbox input
selectItemName: 'btSelectItem',
// show table header
showHeader: true,
// show table footer
showFooter: false,
// show specific columns
showColumns: false,
// show toggle all
showColumnsToggleAll: false,
// shows column search field
showColumnsSearch: false,
// show refresh button
showRefresh: false,
// show toggle button (card view & detail view)
showToggle: false,
// show fullscreen button
showFullscreen: false,
// auto display card view
smartDisplay: true,
// escape a string for insertion into HTML
escape: false,
// minimum number of columns to hide from the columns drop down list.
minimumCountColumns: 1,
// which field is an identity field
idField: undefined,
// unique identifier for each row
uniqueId: undefined,
// enable card view
cardView: false,
// detail view
detailView: false,
detailFormatter: function (index, row) {
return '';
},
detailFilter: function (index, row) {
return true;
},
detailViewIcon: true,
detailViewByClick: false,
detailViewAlign: 'left',
// click to select
clickToSelect: false,
// enable single select
singleSelect: false,
// toolbar options
toolbar: undefined,
toolbarAlign: 'left',
buttonsPrefix: null,
buttonsToolbar: undefined,
buttonsAlign: 'right',
buttonsOrder: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],
checkboxHeader: true,
// maintain meta data
maintainMetaData: true,
// enable multi-row selection
multipleSelectRow: false,
// maintain selected
maintainSelected: false,
// icon size
iconSize: undefined,
// button class
buttonsClass: bs.buttonsClass,
// prefix
iconsPrefix: bs.iconsPrefix, // glyphicon or fa (font awesome)
// icons
icons: bs.icons,
// return true if the click should be ignored
// false if the click should cause the row to be selected
ignoreClickToSelectOn: function (element) {
return $.inArray(element.tagName, ['A', 'BUTTON']);
},
// row style
rowStyle: function (row, index) {
return {};
},
// row attributes
rowAttributes: function (row, index) {
return {};
},
// footer style
footerStyle: function (row, index) {
return {};
},
// font size of the loading text
loadingFontSize: 'auto',
// custom loading template
loadingTemplate: function loadingTemplate(loadingMessage) {
return "<span class=\"loading-wrap\">\n <span class=\"loading-text\">".concat(loadingMessage, "</span>\n <span class=\"animation-wrap\"><span class=\"animation-dot\"></span></span>\n </span>\n ");
},
});
7. Customize columns with the following options.
var COLUMN_DEFAULTS = {
field: undefined,
title: undefined,
title<a href="http://www.jquerypost.com/category/animation/">Animation</a>: undefined,
'class': undefined,
width: undefined,
widthUnit: 'px',
rowspan: undefined,
colspan: undefined,
align: undefined,
// left, right, center
halign: undefined,
// left, right, center
falign: undefined,
// left, right, center
valign: undefined,
// top, middle, bottom
cellStyle: undefined,
radio: false,
checkbox: false,
checkboxEnabled: true,
clickToSelect: true,
showSelectTitle: false,
sortable: false,
sortName: undefined,
order: 'asc',
// asc, desc
sorter: undefined,
visible: true,
switchable: true,
cardVisible: true,
searchable: true,
formatter: undefined,
footerFormatter: undefined,
detailFormatter: undefined,
searchFormatter: true,
searchHighlightFormatter: false,
escape: false,
events: undefined
};
8. You can also pass the options via data-OPTION attributes as these:
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="server"
data-url="/examples/bootstrap_table/data"
data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="id" data-halign="right" data-align="center">Item ID</th>
<th data-field="name" data-halign="center" data-align="left">Item Name</th>
<th data-field="price" data-halign="left" data-align="right">Item
</tr>
</thead>
</table>
9. Callback functions and event handlers.
$('#example').on('eventName.bs.table', function (e, arg1, arg2, ...) {
// ...
}))
// or
$('#example').bootstrapTable({
onAll: function onAll(name, args) {
return false;
},
onClickCell: function onClickCell(field, value, row, $element) {
return false;
},
onDblClickCell: function onDblClickCell(field, value, row, $element) {
return false;
},
onClickRow: function onClickRow(item, $element) {
return false;
},
onDblClickRow: function onDblClickRow(item, $element) {
return false;
},
onSort: function onSort(name, order) {
return false;
},
onCheck: function onCheck(row) {
return false;
},
onUncheck: function onUncheck(row) {
return false;
},
onCheckAll: function onCheckAll(rows) {
return false;
},
onUncheckAll: function onUncheckAll(rows) {
return false;
},
onCheckSome: function onCheckSome(rows) {
return false;
},
onUncheckSome: function onUncheckSome(rows) {
return false;
},
onLoadSuccess: function onLoadSuccess(data) {
return false;
},
onLoadError: function onLoadError(status) {
return false;
},
onColumnSwitch: function onColumnSwitch(field, checked) {
return false;
},
onPageChange: function onPageChange(number, size) {
return false;
},
onSearch: function onSearch(text) {
return false;
},
onToggle: function onToggle(cardView) {
return false;
},
onPreBody: function onPreBody(data) {
return false;
},
onPostBody: function onPostBody() {
return false;
},
onPostHeader: function onPostHeader() {
return false;
},
onPostFooter: function onPostFooter() {
return false;
},
onExpandRow: function onExpandRow(index, row, $detail) {
return false;
},
onCollapseRow: function onCollapseRow(index, row) {
return false;
},
onRefreshOptions: function onRefreshOptions(options) {
return false;
},
onRefresh: function onRefresh(params) {
return false;
},
onResetView: function onResetView() {
return false;
},
onScrollBody: function onScrollBody() {
return false;
}
});
11. API methods:
// returns the options object
$('#example').bootstrapTable('getOptions');
// up<a href="http://www.jquerypost.com/tag/calendar/">date</a>s the options
$('#example').bootstrapTable('refreshOptions', OPTIONS)
// gets the table data
$('#example').bootstrapTable('getData', useCurrentPage(True Or False), includeHiddenRows(True Or False), unfiltered)
// gets the selected rows
$('#example').bootstrapTable('getSelections')
// gets all the selected rows
$('#example').bootstrapTable('getAllSelections');
// loads data into the table
$('#example').bootstrapTable('load', Data);
// appends data to the table
$('#example').bootstrapTable('append', Data);
// prepends data
$('#example').bootstrapTable('prepend', Data);
// removes data from the table
$('#example').bootstrapTable('getOptions', fieldName, Values);
// removes all data
$('#example').bootstrapTable('removeAll');
// inserts a new row to the table
$('#example').bootstrapTable('insertRow', Index, rowData);
// updates a row
$('#example').bootstrapTable('updateRow', Index, rowData, Replace(True Or False));
// gets data by unique ID
$('#example').bootstrapTable('getRowByUniqueId', Id);
// updates specified rows
$('#example').bootstrapTable('updateByUniqueId', ID, rowData, Replace(True Or False));
// removes data
$('#example').bootstrapTable('remove', {field: 'id', values: ids}).
// removes data by unique ID
$('#example').bootstrapTable('removeByUniqueId', Id);
// updates a cell
$('#example').bootstrapTable('updateCel', Index, fieldName, Value);
// updates data
$('#example').bootstrapTable('updateCell', {index: 1, field: 'name', value: 'Updated Name'}).
// updates a cell by unique ID
$('#example').bootstrapTable('updateCellByUniqueId', Id, fieldName, Value);
// shows the row
$('#example').bootstrapTable('showRow', Index, Id);
// hides a row
$('#example').bootstrapTable('hideRow', Index, Id);
// gets hidden rows
$('#example').bootstrapTable('getHiddenRows', Show(True or False));
// shows the column
$('#example').bootstrapTable('showColumn', Field);
// hides a column
$('#example').bootstrapTable('hideColumn', Field);
// gets visible columns
$('#example').bootstrapTable('getVisibleColumns');
// gets hidden columns
$('#example').bootstrapTable('getHiddenColumns');
// shows all columns
$('#example').bootstrapTable('showAllColumns');
// hides all columns
$('#example').bootstrapTable('hideAllColumns');
// merges cells
$('#example').bootstrapTable('mergeCells', Index, fieldName, rowSpan, colSpan);
// selects all rows
$('#example').bootstrapTable('checkAll');
// unchecks al rows
$('#example').bootstrapTable('uncheckAll');
// inverts the selection
$('#example').bootstrapTable('checkInvert');
// selects a specific row
$('#example').bootstrapTable('check', Index);
// unchecks a specific row
$('#example').bootstrapTable('uncheck', Index);
// selects a row by array of values
$('#example').bootstrapTable('checkBy', fieldName, Values);
// unchecks a row by array of values
$('#example').bootstrapTable('uncheckBy', fieldName, Values);
// refreshes/reloads the remote server data
$('#example').bootstrapTable('refresh', Data);
// destroys the instance
$('#example').bootstrapTable('destroy');
// resets the table view
$('#example').bootstrapTable('resetView', Height);
// resets the width
$('#example').bootstrapTable('resetWidth');
// shows loading status
$('#example').bootstrapTable('showLoading');
// hides loading status
$('#example').bootstrapTable('hideLoading');
// toggles pagination controls
$('#example').bootstrapTable('togglePagination');
// toggles the fullscreen mode
$('#example').bootstrapTable('toggleFullscreen');
// toggles between table/card views
$('#example').bootstrapTable('toggleView');
// resets the search
$('#example').bootstrapTable('resetSearch');
// filters the table
$('#example').bootstrapTable('filterBy', Filter, Options);
// scrolls to a specific point
$('#example').bootstrapTable('scrollTo', Value(px) or {unit: 'px', value: 0});
// gets the current scroll position
$('#example').bootstrapTable('getScrollPosition');
// goes to a specific page
$('#example').bootstrapTable('selectPage', Page);
// goes to the prev page
$('#example').bootstrapTable('prevPage');
// goes to the next page
$('#example').bootstrapTable('nextPage');
// toggles the details view
$('#example').bootstrapTable('toggleDetailView', Index);
// expands a row
$('#example').bootstrapTable('expandRow', Index);
// collapses a row
$('#example').bootstrapTable('collapseRow', Index);
// expands all rows
$('#example').bootstrapTable('expandAllRows');
// collapses all rows
$('#example').bootstrapTable('collapseAllRows');
// expands row by unique ID
$('#example').bootstrapTable('expandRowByUniqueId', uniqueID);
// collapses row by unique ID
$('#example').bootstrapTable('collapseRowByUniqueId', uniqueID);
// updates the column title
$('#example').bootstrapTable('updateColumnTitle', fieldName, Title);
// updates format text
$('#example').bootstrapTable('updateFormatText', formatName, text);
Done
