Feature-rich Data Table Plugin For Bootstrap 5/4/3/2
| File Size: | 3.16 MB |
|---|---|
| Views Total: | 53039 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Bootstrap Table is a responsive, dynamic, extendable, multifunctional, and highly-customizable jQuery data table plugin for Bootstrap (5/4/3/2), Bulma, Foundation, Materialize, and Semantic frameworks.
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.
Table Of Contents:
Basic usage:
1. Include the Bootstrap Table plugin's files and extensions of your choice in your Bootstrap project.
<!-- Dependencies --> <link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <!-- Bootstrap Table Plugin --> <link rel="stylesheet" href="bootstrap-table.css"> <script src="bootstrap-table.js"></script> <!-- Bulma Theme --> <link rel="stylesheet" href="thems/bulma/bootstrap-table-bulma.css"> <script src="thems/bulma/bootstrap-table-bulma.js"></script> <!-- Foundation Themes --> <link rel="stylesheet" href="thems/bulma/bootstrap-table-foundation.css"> <script src="thems/bulma/bootstrap-table-foundation.js"></script> <!-- Materialize Themes --> <link rel="stylesheet" href="thems/bulma/bootstrap-table-materialize.css"> <script src="thems/bulma/bootstrap-table-materialize.js"></script> <!-- Semantic Themes --> <link rel="stylesheet" href="thems/bulma/bootstrap-table-semantic.css"> <script src="thems/bulma/bootstrap-table-semantic.js"></script>
2. Include the Bootstrap Table plugin's extensions:
<!-- use the query params in the address bar --> <script src="extensions/addrbar/bootstrap-table-addrbar.js"></script> <!-- auto refresh table --> <script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> <!-- enable cookies --> <script src="extensions/cookie/bootstrap-table-cookie.js"></script> <!-- allows you to copy table rows --> <script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> <!-- custom table view --> <script src="extensions/custom-view/bootstrap-table-custom-view.js"></script> <!-- use data-defer-url instead of data-url --> <script src="extensions/defer-url/bootstrap-table-defer-url.js"></script> <!-- editable table --> <script src="extensions/editable/bootstrap-table-editable.js"></script> <!-- exports table data to 'json', 'xml', 'csv', 'txt', 'sql', 'excel', etc --> <script src="extensions/export/bootstrap-table-export.js"></script> <!-- enables filter controls --> <link rel="stylesheet" href="extensions/filter-control/bootstrap-table-filter-control.css"> <script src="extensions/filter-control/bootstrap-table-filter-control.js"></script> <!-- makes table columns fixed --> <link rel="stylesheet" src="extensions/fixed-columns/bootstrap-table-fixed-columns.css"> <script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script> <!-- groups the data by the field --> <link rel="stylesheet" src="extensions/group-by-v2/bootstrap-table-group-by.css"> <script src="extensions/group-by-v2/bootstrap-table-group-by.js"></script> <!-- enhanced i18n support --> <script src="extensions/i18n-enhance/bootstrap-table-i18n-enhance.js"></script> <!-- enables key events --> <script src="extensions/key-events/bootstrap-table-key-events.js"></script> <!-- responsive & mobile friendly table view --> <script src="extensions/mobile/bootstrap-table-mobile.js"></script> <!-- enables multi-sort --> <script src="extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script> <!-- allows to jump to a specific page --> <link rel="stylesheet" href="extensions/page-jump-to/bootstrap-table-jump-to.css"></style> <script src="extensions/page-jump-to/bootstrap-table-jump-to.js"></script> <!-- pipeline --> <script src="extensions/pipeline/bootstrap-table-pipeline.js"></script> <!-- print --> <script src="extensions/print/bootstrap-table-print.js"></script> <!-- reorder table via drag and drop --> <link rel="stylesheet" href="dragtable.css"> <script src="jquery-ui.js"></script> <script src="jquery.dragtable.js"></script> <script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script> <!-- allows to reorder table rows --> <link rel="stylesheet" href="bootstrap-table-reorder-rows.css"> <script src="jquery.tablednd.js"></script> <script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script> <!-- resizable table --> <script src="extensions/resizable/bootstrap-table-resizable.js"></script> <!-- sticky table header --> <script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script> <!-- enables toolbar --> <script src="extensions/toolbar/bootstrap-table-toolbar.js"></script> <!-- enables tree grid --> <script src="extensions/treegrid/bootstrap-table-treegrid.js"></script>
3. Load languages you prefer. You can find all languages under the local folder.
<script src="locale/bootstrap-table-en-US.min.js"></script>
4. 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>@twitter</td>
</tr>
</tbody>
</table>
5. 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>
6. You can also initialize the data table and define the tabular data in the JavaScript as these:
<table class="table" id="example"> </table>
$('#example').bootstrapTable({
columns: [{
field: 'first',
title: 'First Name'
}, {
field: 'last',
title: 'Last Name'
}, {
field: 'handle',
title: 'Handle'
}],
data: [{
first: 'Mark',
last: 'Otto',
handle: '@mdo'
},
...
});
7. 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
virtualScroll: 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,
// Set true to reset the page number when sorting.
sortResetPage: 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
paginationLoadMore: false,
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,
searchable: true, // Set true to send searchable params to the server while using server-side pagination
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 ");
},
});
8. Customize columns with the following options.
var COLUMN_DEFAULTS = {
field: undefined,
title: undefined,
titleTooltip: 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,
switchableLabel: undefined,
cardVisible: true,
searchable: true,
formatter: undefined,
footerFormatter: undefined,
footerStyle: undefined,
detailFormatter: undefined,
searchFormatter: true,
searchHighlightFormatter: false,
escape: false,
events: undefined
};
9. 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>
10. 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');
// updates the options
$('#example').bootstrapTable('refreshOptions', OPTIONS)
// gets the table data
$('#example').bootstrapTable('getData', useCurrentPage(True Or False), includeHiddenRows(True Or False), unfiltered)
// Get the loaded data of the footer at the moment that this method is called
$('#example').bootstrapTable('getFooterData').
// 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('sortBy', {
field: 'name',
sortOrder: 'asc', // 'asc' or 'desc'
});
// 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);
12. Extension options.
{
/*** Addrbar ***/
// enable the extension
// data attribute: data-addrbar
addrbar: false,
// the prefix of the query params, it should be used for multi tables
// parameters:
// page: page number
// size: page size
// order: asc/dsc
// sort: the sort keyword
// search: search keyword
// data attribute: data-addr-prefix
addrPrefix: '',
/*** Auto Refresh ***/
// use the extension
// data attribute: data-auto-refresh
autoRefresh: false,
// interval in ms
// data attribute: data-auto-refresh-interval
autoRefreshInterval: 60,
// auto refresh silently
// data attribute: data-auto-refresh-silent
autoRefreshSilent: true,
// set true to enable auto refresh
// data attribute: data-auto-refresh-status
autoRefreshStatus: true,
/*** Cookie ***/
// use the extension
// data attribute: data-cookie
cookie: false,
// delete cookies with your custom function
// data attribute: data-cookie-custom-storage-delete
cookieCustomStorageDelete: function(cookieName){},
// get the saved value from your custom function
// data attribute: data-cookie-custom-storage-get
cookieCustomStorageGet: function(cookieName){},
// save values with your custom function
// data attribute: data-cookie-custom-storage-set
cookieCustomStorageSet: function(cookieName, value){},
// domain name (string)
// data attribute: data-cookie-domain
cookieDomain: null,
// expire date: 's', 'mi', 'h', 'd', 'm', 'y'
// data attribute: data-cookie-expire
cookieExpire: '2h',
// cookie ID
// data attribute: data-cookie-id-table
cookieIdTable: '',
// cookie path
// data attribute: data-cookie-path
cookiePath: null,
// use cookies only via secure/encrypted connections
// data attribute: data-cookie-secure
cookieSecure: null,
// define the value of the SameSite cookie attribute
// data attribute: data-cookie-same-site
cookieSameSite: 'lax',
// cookieStorage or localStorage or sessionStorage or customStorage
// data attribute: data-cookie-storage
cookieStorage: 'cookieStorage',
// Set this array with the table properties (sortOrder, sortName, pageNumber, pageList, columns, searchText, filterControl) that you want to save
// data attribute: data-cookies-enabled
cookiesEnabled: ['bs.table.sortOrder', 'bs.table.sortName', 'bs.table.pageNumber', 'bs.table.pageList', 'bs.table.columns', 'bs.table.searchText', 'bs.table.filterControl'],
/*** Copy Rows ***/
// show the copy row button
// data attribute: data-show-copy-rows
showCopyRows: false,
// delimiter
// data attribute: data-copy-delimiter
copyDelimiter: ', ',
// add new lines when copying
// data attribute: data-copy-newline
copyNewline: '\n',
// copy hidden rows
// data attribute: data-copy-width-hidden
copyWithHidden: false,
/*** Custom View ***/
// enable the extension
// data attribute: data-custom-view
customView: false,
// show the custom view
// data attribute: data-show-custom-view
showCustomView: false,
// show the custom view button
// data attribute: data-show-custom-view-button
showCustomViewButton: false,
/*** Defer URL ***/
// use data-defer-url instead of data-url
// data attribute: data-defer-url
deferUrl: null,
/*** Editable ***/
// enable the extension
// data attribute: data-editable
editable: false,
// !!! Column options
// data attribute: data-always-use-formatter
alwaysUseFormatter: false,
// !!! Column options
// data attribute: data-editable
editable: false,
/*** Export ***/
// enable the extension
// data attribute: data-show-export
showExport: false,
// 'basic', 'all', 'selected'
// data attribute: data-export-data-type
exportDataType: 'basic',
// export the table footer
// data attribute: data-export-footer
exportFooter: false,
// tableExport.jquery.plugin options
// https://github.com/hhurz/tableExport.jquery.plugin#options
// data attribute: data-export-options
exportOptions: null,
// 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'
// data attribute: data-export-types
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
// !!! Column options
// data attribute: data-force-export
forceExport: false,
// !!! Column options
// data attribute: data-force-hide
forceHide: false,
/*** Filter Control ***/
// enable the extension
// data attribute: data-filter-control
filterControl: true,
// show/hide the filter
// data attribute: data-filter-control-visible
filterControlVisible: false,
// left, right or auto
// data attribute: data-alignment-select-control-options
alignmentSelectControlOptions: undefined,
// disable the filter when searching
// data attribute: data-disable-control-when-search
disableControlWhenSearch: false,
// set to #filter to allow custom input filter in a element with the id filter.
// Each filter element (input or select) must have the following class: bootstrap-table-filter-control-<FieldName>
// data attribute: data-filter-control-container
filterControlContainer: false,
// function to collect data
// data attribute: data-filter-data-collector
filterDataCollector: function(){},
// hide unused select options
// data attribute: data-hide-unused-select-options
hideUnusedSelectOptions: false,
// data attribute: data-search-on-enter-key
searchOnEnterKey: true,
// show the filter control switch button
// data attribute: data-show-filter-control-switch
showFilterControlSwitch: false,
// !!! Column options
// data attribute: data-filter-control
filterControl: true,
// !!! Column options
// data attribute: data-filter-control-placeholder
filterControlPlaceholder: '',
// !!! Column options
// data attribute: data-filter-custom-search
filterCustomSearch: function(text, value, filed, data){},
// !!! Column options
// set custom select filter values
// use var:variable to load from a variable
// obj:variable.key to load from a object
// url:http://www.example.com/data.json to load from a remote json file
// json:{key:data} to load from a json string
// func:functionName to load from a function.
// data attribute: data-filter-data
filterData: undefined,
// !!! Column options
// e.g. {"autoclose":true, "clearBtn": true, "todayHighlight": true}
// data attribute: data-filter-datepicker-options
filterDatepickerOptions: undefined,
// !!! Column options
// set the default value of the filter
// data attribute: data-filter-default
filterDefault: '',
// !!! Column options
// or 'desc', or 'server'
// data attribute: data-filter-order-by
filterOrderBy: 'asc',
// !!! Column options
// data attribute: data-filter-starts-with-search
filterStartsWithSearch: false,
// !!! Column options
// data attribute: data-filter-strict-search
filterStrictSearch: false,
/*** Fixed Columns ***/
// enable the extension
// data attribute: data-fixed-columns
fixedColumns: true,
// number of left columns to be fixed
// data attribute: data-fixed-number
fixedNumber: 0,
// number of right columns to be fixed
// data attribute: data-fixed-right-number
fixedRightNumber: 0,
/*** Group By ***/
// enable the extension
// data attribute: data-group-by
groupBy: false,
// set the field name(s) you want to group the data
// string or array
// data attribute: data-group-by-field
groupByField: '',
// group by a custom function
// data attribute: data-group-by-formatter
groupByFormatter: function(value, idx, data){},
// allow to collapse/expand groups
// data attribute: data-group-by-toggle
groupByToggle: false,
// show collapse/expand toggle icons
// data attribute: data-group-by-show-toggle-icon
groupByShowToggleIcon: false,
// array or function
// data attribute: data-group-by-collapsed-groups
groupByCollapsedGroups: [],
/*** Key Events ***/
// enable the extension
// data attribute: data-key-events
keyEvents: false,
/*** Mobile ***/
// enable the extension
// data attribute: data-check-on-init
checkOnInit: true,
// hide these columns in the cardView mode.
// data attribute: data-columns-hidden
columnsHidden: [],
// data attribute: data-min-height
minHeight: undefined,
// data attribute: data-min-width
minWidth: 562,
// change the view between card and table depending on the width and height
// data attribute: data-mobile-responsive
mobileResponsive: false,
/*** Multiple Sort ***/
// enable the extension
// data attribute: data-show-multi-sort
showMultiSort: false,
// data attribute: data-show-multi-sort-button
showMultiSortButton: true,
// data attribute: data-multi-sort-strict-sort
multiSortStrictSort: false,
// e.g. [{"sortName": "forks_count","sortOrder":"desc"},{"sortName":"stargazers_count","sortOrder":"desc"}]
// data attribute: data-sort-priority
sortPriority: undefined,
/*** Page Jump To ***/
// enable the extension
// data attribute: data-show-jump-to
showJumpTo: false,
// Show the jump to page control only if the total number of pages is greater than or equal to this value
// data attribute: data-show-jump-to-by-pages
showJumpToByPages: 0,
/*** Print ***/
// enable the extension
// data attribute: data-show-print
showPrint: false,
// data attribute: data-print-as-filtered-and-sorted-on-ui
printAsFilteredAndSortedOnUI: true,
// data attribute: data-print-page-builder
printPageBuilder: function(table){return printPageBuilderDefault(table)}
// set the column field name to sort
// data attribute: data-print-sort-column
printSortColumn: '',
// or 'desc'
// data attribute: data-print-sort-order
printSortOrder: 'asc',
/*** Reorder Rows ***/
// enable the extension
// data attribute: data-reorderable-rows
reorderableRows: false,
// data attribute: data-on-drag-style
onDragStyle: '',
// data attribute: data-on-drag-class
onDragClass: 10,
// data attribute: data-on-drop-style
onDropStyle: 10,
// data attribute: data-on-reorder-rows-drag
onReorderRowsDrag: function(){},
// data attribute: data-on-reorder-rows-drop
onReorderRowsDrop: function(){},
// data attribute: data-drag-handle
dragHandle: '>tbody>tr>td',
// data attribute: data-use-row-attr-func
useRowAttrFunc: false,
/*** Resizable ***/
// enable the extension
// data attribute: data-resizable
resizable: false,
/*** Sticky Header ***/
// enable the extension
// data attribute: data-sticky-header
stickyHeader: false,
// data attribute: data-sticky-header-offset-left
stickyHeaderOffsetLeft: 0,
// data attribute: data-sticky-header-offset-right
stickyHeaderOffsetRight: 0,
// data attribute: data-sticky-header-offset-y
stickyHeaderOffsetY: 0,
/*** Toolbar ***/
// data attribute: data-advanced-search
advancedSearch: false,
// set the action of the form
// data attribute: data-action-form
actionForm: '',
// form ID
// data attribute: data-id-form
idForm: '',
// table ID
// data attribute: data-id-table
idTable: 0,
/*** Treegrid ***/
// data attribute: data-tree-enable
treeEnable: false,
// set the idField
// data attribute: data-id-field
idField: 'id',
// set the parent ID
// data attribute: data-parent-id-field
parentIdField: '',
// data attribute: data-tree-show-field
treeShowField: '',
// set the root parent ID
// data attribute: data-root-parent-id
rootParentId: '',
}
13. API methods for extensions:
// delete cookie
deleteCookie(cookieName);
// get the cookies
getCookies();
// copy the selected rows
copyColumnsToClipboard();
// toggle between the table and the custom view
toggleCustomView();
// export table with options
exportTable(options);
// trigger the search action
triggerSearch();
// clear the filter control
clearFilterControl();
// toggle the filter control
toggleFilterControl();
// change the language
changeLocale(local);
// force multiple sorting
multipleSort();
// multiple sorting
multiSort(sortPriority);
// order columns
orderColumns({name: 0, price: 1});
Changelog:
v1.25.0 (2025-10-23)
- Update: Added aria-sort attribute on sortable headers.
- Update: Fixed loading style display error in Bootstrap dark mode.
- Update: Fixed performance issues in the resetRows method when handling large datasets.
- Update: Fixed bug where the table height option caused duplicate headers when a caption was present.
- Update: Fixed bug where CSS !important is ignored.
- Update: Migrated site from Jekyll to Astro Framework.
- Update(group-by-v2): Fixed a bug where rows were not grouped correctly when another column was sorted.
- Update(group-by-v2): Modernized the extension with ES6+ features.
v1.24.1 (2025-03-03)
- New: Add lt-LT locale.
- Fixed filterBy not working bug after using filterAlgorithm option.
- Fixed cookie extension throws js error bug.
- Fixed icons prefix bugs in extensions.
- Fix bug where totalRows is not integer in formatter.
- Fixed bug of table is not destroyed after vue component is unmounted.
- Fixed high severity vulnerability issue using npm-run-all2 instead.
v1.24.0 (2024-12-23)
- New: Added card-view-field class to card-view.
- Update: Fixed id not working bug in rowAttributes.
- Update: Fixed data field attr not working bug.
- Update: Fixed column is undefined bug in updateFieldGroup when using refreshOptions.
- Update: Fixed post-header trigger bug after table destroy.
- Update: Fixed strictSearch not working bug.
- Update: Fixed insertRow bug after on the last row of the table.
- Update: Fixed display error of total rows using load more pagination.
- Update: Updated Sass and refined the SCSS file.
- Update: Update Eslint and fix some lint errors.
- Update(cookie): Fixed cookie columns display error after adding a column.
- Update(filter-control): Fixed select not working bug after an Ajax loaded.
v1.23.5 (2024-10-01)
- New: Added getFooterData method.
- Update: Fixed refresh invalid url bug when url is relative path.
- Update: Fixed getData bug with formatted param.
- Update: Fixed column class option not work bug in td.
v1.23.3 (2024-09-21)
- New: Added support for column options formatter and footerFormatter methods returning type jQuery, HTMLElement.
- New: Added sortReset method to reset the current sort state.
- New: Added a presentation role if no matching rows are found.
- Update: Fixed refresh method doesn't reuse parameters provided as query bug.
- Update: Fixed compatibility issues when colspan is set as a string.
- Update(fixed-columns): Fixed undefined error in some cases.
- Update(reorder-columns): Fixed incorrect column values order with detail view.
v1.23.2 (2024-07-28)
- New: Added buttonsAttributeTitle option to customize title attribute.
- Update: Updated sort icons using SVG instead of PNG.
- Update: Fixed search highlight not working when it contains multiple HTML elements.
- Update: Fixed the esbuild bundle error.
- Update: Fixed insertRow, updateRow, and updateCell methods bugs.
- Update: Fixed undefined error when searching using the dotted field.
v1.23.1 (2024-07-14)
- Update: Improved vue component init twice without setTimeout.
- Update: Updated af-ZA, fr-BE, fr-CH, fr-FR, fr-LU, and id-ID locales.
- Update(editable): Fixed editable display bug of select type.
- Update(sticky-header): Fixed issue if sticky-header extension is loaded but not enabled.
v1.23.0 (2024-07-01)
- New: Add support for vue3 instead of vue2.
- Update: Fixed getData with formatted data bug when a column is missing.
- Update: Fixed the toggleColumn exception when the field does not exist.
- Update: Fixed vue component init twice when options and columns changed.
- New(addrbar): Added addrCustomParams option for custom parameters.
- New(filter-control): Added filterControlSearchClear option to stop clearing the filters when using the showSearchButton option.
- Update(filter-control): Fixed error with clear filters button when not enabled cookie extension.
- Update(filter-control): Fixed bug with enabled cookie extension using localStorage.
- Update(multiple-sort): Fixed not trigger event bug when using server-side pagination.
v1.22.6 (2024-05-15)
- Bugfixes
v1.22.5 (2024-04-29)
- New: Added sl-SI locales.
- New: Added support for HTML to the updateColumnTitle method.
- Update: Fixed the getRowByUniqueId bug when uniqueId is of mixed data formats.
- Update: Fixed not triggering sort event bug using server-side pagination.
- Update: Fixed custom iconPrefix and icons bugs.
- Update: Fixed virtual scroll cannot work bug in modal.
- Update(multiple-sort): Fixed the duplicated ID bug in the multiple-sort extension.
v1.22.4 (2024-03-27)
- New: Added paginationLoadMore option.
- Update: Fixed change visibility of multiple headers with the same index.
- Update: Fixed footer height bug when setting table-sm.
- Update: Fixed the locale not changed bug using the refreshOptions method.
- Update: Fixed custom iconPrefix and icons bugs.
- Update: Updated vi-VN, zh-CN and zh-TW locales.
- New(copy-rows): Added copyRowsHandler option to handle the copy rows data.
- New(print): Added printStyles option.
- Update(export): Updated the trigger timing for export-started.
- Update(multiple-sort): Fixed the missing parameters error of the sorter function.
- Update(pipeline): Fixed loading message not display bug.
v1.22.3 (2024-02-29)
- New: Added fixedScroll option.
- New: Added support for setting icons automatically by iconsPrefix.
- Update: Fixed search bug when the field has . character.
- Update: Updated tr-TR, es-ES, pt-BR and pt-PT locales.
- New(addrbar): Fixed addrbar bug when using sortReset option.
- Update(jump-to): Fixed page jump to bug when using both pagination display.
- Update(print): Fixed print bug when field is not set.
v1.22.2 (2024-01-11)
- New: Added footerStyle column option.
- Update: Fixed empty style in header and footer bug.
- Update: Fixed the trigger order of sort event.
- Update: Updated ar-SA locale.
- New(cookie): Added cookie support for custom view extension.
- Update(cookie): Fixed cookie bug when using cardView option.
- Update(cookie): Fixed cookie bug with column switchable.
- Update(editable): Fixed export-saved event error when exportDataType is all.
- Update(filter-control): Fixed searchAccentNeutralise option not work.
- Update(filter-control): Fixed filterOrderBy not work bug for select.
- Update(group-by): Fixed group by bug when using singleSelect option.
- Update(reorder-rows): Fixed reorder bug when using pagination.
v1.22.1 (2023-07-07)
- Fixed maximum call stack size exceeded error.
- Update: Updated ca-ES locale.
v1.22.0 (2023-06-17)
- New: Added sortBy method.
- New: Added switchableLabel column option.
- New: Added support for class attribute in toolbar buttons.
- Removed title from columns button.
- Update(addrbar): Fixed clear search bug when clicking clearSearch button.
- Update(filter-control): Fixed pagination server side not working bug.
v1.21.4 (2023-04-02)
- Added searchable table option to enable sending searchable (columns) parameters.
- Update: Fixed Maximum call stack size exceeded error.
- Update: Fixed getData bug with hidden rows.
- Update: Added support for select form to the searchSelector option.
- Update(filter-control): Fixed inputs losing their content when using nested attributes.
- Update(reorder-rows): Fixed reorder row bug when side-pagination is server.
v1.21.3 (2023-03-04)
- New: Added escapeTitle table option.
- New: Added Aria Label to the search input for screenreaders.
- New: Persist data attributes for the header(th).
- Update: Fixed wrong condition for searching with server-side pagination.
- Update: Fixed overwriting the filterOptions after rebuild.
- Update: Fixed apostrophe issue when table via html.
- Update: Updated extend util instead of $.extend.
- Update: Updated Constructor.EVENTS to events.
- Update: Updated packages to the latest version.
- Update(cookie): Fixed issue with hidden and radio/checkbox columns.
- Update(export): Fixed exportTypes option not working bug.
- Update(filter-control): Fixed selector scope issues with multiple tables.
- Update(filter-control): Fixed filtering values issue of select with html value.
- Update(reorder-columns): Fixed same internal function name with reorder-rows.
- Update(treegrid): Fixed treegrid not working when id is text.
v1.21.2 (2022-12-13)
- New: Added sortResetPage option to reset the page number when sorting.
- Update: Fixed overwrite default option bug.
- Update: Updated es-ES, es-CR locale.
- Update: Improved scss style and lint.
- Update: Used scss vars for sorting background image URLs.
- New(custom-view): Added onToggleCustomView event.
- Update(cookie): Fixed cookie name compare bug on using cookiesEnabled option.
- Update(custom-view): Fixed showCustomView option cannot work.
- Update(filter-control): Fixed bug while using a select filter and set searchFormatter to false.
- Update(filter-control): Fixed missing class when specifying iconSize.
- Update(reorder-rows): Updated default value to reorder-rows-on-drag-class of onDragClass option.
v1.21.1 (2022-09-22)
- Update: Improved updateCell to update one HTML cell only.
- Update: Updated fr-FR locale.
- Update: Added missing locales for aria-label.
v1.21.0 (2022-08-20)
- New: Added sortEmptyLast option to allow sorting empty data.
- Update: Fixed bug on nested search with null child.
- Update: Fixed detail view with filter click error.
- Update: Fixed header does not center correctly for the sortable column.
- Update: Fixed regexpCompare bug when filtering columns.
- Update: Fixed showToogle title display error.
- Update: Fixed remove and removeByUnqiueId using object param bug.
- Update: Fixed searchHighlight bug while using searchAccentNeutralise.
- Update: Fixed missing sort for customSearch option.
- Update: Removed duplicated escaping of the column value.
- Update: Updated uk-UA locale.
- New(cookie): : Added hiddenColumns cookie to prevent issues with new added columns.
- New(editable): Added field param to noEditFormatter option.
- New(export): Added onExportStarted event.
- New(filter-control): Added accent normalization check.
- New(filter-control): Added filterControlMultipleSearch and filterControlMultipleSearchDelimiter options.
- Update(custom-by): Fixed the custom view attributes.
- Update(group-by): Fixed not handle complex objects bug.
- Update(filter-control): Fixed select values not clear bug after search.
- Update(filter-control): Fixed the select sorting error.
- Update(filter-control): Fixed wrong selector for caching values with multiple tables.
- Update(filter-control): Fixed the filterDefault option bug as filter if multiple filters exists.
- Update(filter-control): Fixed filter control special char.
- Update(filter-control): Updated default value to false of filterStrictSearch.
- Update(filter-control): Supported not visible columns when using filterControlContainer option.
- Update(multiple-sort): Fixed showMultiSortButton option bug.
- Update(print): Fixed not handle complex objects bug.
- Update(print): Removed switched-off columns from printed table.
v1.20.2 (2022-05-25)
- Update: Fixed small memory leak.
- Update: Fixed the detail view bug with the td instead of icon.
- Update(export): Fixed XSS vulnerability bug by onCellHtmlData.
- Update(export): Fixed export footer bug without setting height.
- Update(filter-control): Fixed the comparison of dates when using the datepicker.
v1.20.1 (2022-05-13)
- Update: Fixed toggle column bug with complex headers.
- Update: Fixed icons option cannot work bug when it's a string.
- Update: Updated TypeScript definitions.
- Update(cookie): Fixed cookie extension error with multiple-sort.
- Update(export): Fixed the exportOptions option cannot support the data attribute.
- Update(reorder-rows): Fixed reorder-rows cannot work because of missing default functions.
v1.20.0 (2022-04-25)
- New: Used bootstrap5 as the default theme.
- New: Added column-switch-all event of toggle all columns.
- New: Added hi-IN and lb-LU locales.
- Update: Fixed the toolbar cannot refresh search bug.
- Update: Fixed the card view align style bug.
- Update: Fixed custom search filter bug if the value is Object.
- Update: Fixed table border displays bug when setting height.
- Update: Fixed error when the column events are undefined.
- Update: Fixed escape column option doesn't override table option bug.
- Update: Fixed toggle all columns error when column switchable is false.
- Update: Fixed check if the column is visible on card view.
- Update: Fixed hide loading bug when canceling the request.
- Update: Fixed default value of clickToSelect column option.
- Update: Fixed onVirtualScroll not define default method.
- Update: Updated cs-CZ, ko-KR, nl-NL, nl-BE, bg-BG, fr-LU locales.
- New(filter-control): New version of filter-control with new features.
- New(reorder-rows):: Added onAllowDrop and onDragStop options.
- Update(cookie): Fixed sortName and sortOrder bug with cookie.
- Update(cookie): Fixed the toggle column bug with the cookie.
- Update(export): Fixed selector error if only one export type is defined.
- Update(filter-control): Fixed new input class form-select of bootstrap 5.
- Update(multiple-sort): Fixed the modal cannot close after sorting.
- Update(print): Fixed missing print button for bootstrap 5.
- Update(print): Fixed printPageBuilder option cannot define in html attribute.
- Update(toolbar): Fixed toolbar extension modal bug with bootstrap 5.
v1.19.1 (2021-11-13)
- Update: Fixed the CVE security problem.
- Update: Fixed cannot search for special characters when using searchHighlight.
- Update(auto-refresh): Updated the showAutoRefresh option as default.
- Update(export): Fixed export with only one export type bug.
- Update(filter-control): Fixed filter-control cannot work bug.
- Update(filter-control): Prevent duplicated elements for filter-control.
v1.19.0 (2021-11-08)
- New: Added onlyCurrentPage param for checkBy/uncheckBy methods.
- New: Used bootstrap icons as default icons for bootstrap v5.
- New: Added regexSearch option which allows to filter the table using regex.
- New: Added support for allow importing stylesheets.
- New: Added toggle-pagination event.
- New: Added virtual-scroll event.
- Update: Fixed vue component cannot work.
- Update: Fixed infinite loop error with wrong server-side pagination metadata.
- Update: Improved the behavior of ajax abort.
- Update: Fixed click bug when paginationLoop is false.
- Update: Fixed the highlighting bug when using radio/checkboxes.
- Update: Fixed width bug caused by loading css.
- Update: Removed the input-group-append class for bootstrap v5.
- Update: Fixed duplicate definition id bug.
- Update: Fixed the comparison of search inputs.
- Update: Fixed broken page-list selector.
- Update: Fixed overwrite custom locale function bug.
- Update: Fixed bug with server side pagination and the page size all.
- Update: Fixed all checkbox not auto check after pagination changed.
- Update: Updated the es-MX locate.
- New(cookie): Added Multiple Sort order stored in cookie extension.
- New(cookie): Added Card view state stored in cookie extension.
- New(copy): Added ignoreCopy column option to prevent copying the column data.
- New(copy): Added rawCopy column option to copy the raw value instead of the formatted value.
- Update(cookie): Fixed switchable column bug with the cookie extension.
- Update(export): Fixed the export dropdown cannot be closed bug.
- Update(filter-control): Updated filterMultipleSelectOptions to filterControlMultipleSelectOptions option.
- Update(filter-control): Fixed bug with cookie deletion of none filter cookies.
- Update(filter-control): Fixed bug when using the load method.
- Update(group-by): Fixed overwriting the column classes bug on group collapsed rows.
- Update(multiple-sort): Fixed hide/show column error with no sortPriority defined.
- Update(page-jump-to): Fixed jump-to display bug in bootstrap v3.
- Update(print): Fixed print formatter bug.
- Update(reorder-rows): Fixed reorder-rows not work property.
- Update(reorder-rows): Fixed the drag selector to prevent a checkbox bug on mobile.
- Update(resizable): Fixed the reinitialization after the table changed.
- Update(sticky-header): Fixed sticky-header not work property with group header.
- Update(treegrid): Fixed bug of treegrid from html.
v1.18.3 (2021-03-29)
- Update: Fixed negative number bug when searching with comparison.
- Update: Fixed non-conform HTML-Standard problems.
- Update: Fixed td width bug using card view.
- Update: Fixed exact match problem when searching term with accent.
- Update: Update pt-PT and fa-IR locales.
- New(page-jump-to): Added showJumpToByPages option.
- Update(auth-refresh): Fixed auto refresh not clear interval bug.
- Update(multiple-sort): Fixed multiple-sort cannot support iconSize bug.
- Update(sticky-header): Fixed stickyHeaderOffsetY option cannot work.
- Update(sticky-header): Updated the stickyHeader offset options to number.
v1.18.2 (2021-01-24)
- Update: Fixed bootstrap5 cannot work bug.
- Update: Fixed checkbox display bug when using formatter.
- Update: Fixed search highlight bug.
- Update: Updated ru-RU and de-DE locales.
- New(filter-control): Added support for flat JSON.
- Update(cookie): Fixed not deleted cookie bug when the sort was reset.
- Update(export): Not export the detail view icon column.
- Update(filter-control): Fixed not working when using filterControlContainer.
- Update(multiple-sort): Fixed multiple-sort cannot work bug.
- Update(resizable): Fixed resizable cannot work in modal.
v1.18.1 (2020-12-06)
- New(locale): Added short locales based on ISO Language.
- Update: Updated sk-SK, fr-FR, de-DE, and es-* locales.
- Update: Fixed toggleCheck, getSelections and remove bug.
- Update: Fixed buttons option bug using in data attribute.
- Update: Fixed custom icons option bug.
- Update: Fixed cellStyle column option not work in card view.
- Update: Fixed getSelection bug when using search.
- Update: Fixed pageList option with all display bug using smartDisplay.
- Update: Fixed search highlight cannot work bug when data field is number.
- Update: Fixed updateColumnTitle is undo bug after pagination.
- Update: Fixed multipleSelectRow option bug.
- Update: Fixed icon-size option bug with pagination.
This awesome jQuery plugin is developed by wenzhixin. For more Advanced Usages, please check the demo page or visit the official website.











