Feature-rich Data Table Plugin For Bootstrap 5/4/3/2

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:

• Install
• Options
• Column Options
• Events
• Methods
• Extensions

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,

  // 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)

// 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.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.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.