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