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

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

Bootstrap Table is a responsive, dynamic, extendable, multifunctional, and highly-customizable jQuery data table plugin for Bootstrap 4, Bootstrap 3 and Bootstrap 2.


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

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>
<!-- Extensions -->
<link rel="stylesheet" href="/path/to/bootstrap-editable.css">

2. Turns a standard HTML table into a data table using the data-toggle="table" attribute.

<table class="table" data-toggle="table">
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <td>the Bird</td>

3. To load tabular data from an external JSON file:

<table class="table" data-toggle="table" data-url="data.json">
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>

4. You can also initialize the data table and define the tabular data in the JavaScript as these:

<table class="table" id="example">
  columns: [{
      field: 'first',
      title: 'First Name'
  }, {
      field: 'last',
      title: 'Last Name'
  }, {
      field: 'handle',
      title: 'Handle'
  data: [{
      first: 'Mark',
      last: 'Otto',
      handle: '@mdo'

5. Full plugin options to customize your data table.

  // table classes
  classes: 'table table-hover',
  // class name of sortable cell
  sortClass: undefined,
  // local file
  locale: undefined,
  // height
  height: undefined,
  // undefined text
  undefinedText: '-',
  // custom sort name
  sortName: undefined,
  // or desc
  sortOrder: 'asc',
  // enable stable sort
  sortStable: false,
  // remember order direction
  rememberOrder: false,
  // striped rows
  striped: false,
  // table columns
  columns: [[]],
  // tabular data
  data: [],
  // total field
  totalField: 'total',
  // data field
  dataField: 'rows',
  // AJAX options
  method: 'get',
  url: undefined,
  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,
  paginationLoop: true,
  sidePagination: 'client', // client or server
  totalRows: 0, // server side need to set
  pageNumber: 1,
  pageSize: 10,
  pageList: [10, 25, 50, 100],
  paginationHAlign: 'right', //right, left
  paginationVAlign: 'bottom', //bottom, top, both
  paginationDetailHAlign: 'left', //right, left
  paginationPreText: '&lsaquo;',
  paginationNextText: '&rsaquo;',
  // live search options
  search: false,
  searchOnEnterKey: false,
  strictSearch: false,
  searchAlign: 'right',
  // name of radio or checkbox input
  selectItemName: 'btSelectItem',
  // show table header
  showHeader: true,
  // show table footer
  showFooter: false,
  // show specific columns
  showColumns: false,
  // show pagination switch
  showPaginationSwitch: 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;
  // trim spaces in search field
  trimOnSearch: true,
  // click t select
  clickToSelect: false,
  // enable single select
  singleSelect: false,
  // toolbar options
  toolbar: undefined,
  toolbarAlign: 'left',
  buttonsToolbar: undefined,
  buttonsAlign: 'right',
  checkboxHeader: true,
  // enable sortable
  sortable: true,
  // enable silent sort
  silentSort: true,
  // maintain selected
  maintainSelected: false,
  // timout in milliseconds
  searchTimeOut: 500,
  // search text
  searchText: '',
  // icon size
  iconSize: undefined,
  // button class
  buttonsClass: bs.buttonsClass,
  // prefix
  iconsPrefix: bs.iconsPrefix, // glyphicon or fa (font awesome)
  // icons
  icons: bs.icons,
  // custom search function
  customSearch: $.noop,
  // custom sort function
  customSort: $.noop,
  // 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 {};

6. You can also pass the options via data-OPTION attributes as these:

<table id="table"
   data-page-list="[10, 25, 50, 100, ALL]"

7. Callback functions:

  onAll: function (name, args) {
      return false;
  onClickCell: function (field, value, row, $element) {
      return false;
  onDblClickCell: function (field, value, row, $element) {
      return false;
  onClickRow: function (item, $element) {
      return false;
  onDblClickRow: function (item, $element) {
      return false;
  onSort: function (name, order) {
      return false;
  onCheck: function (row) {
      return false;
  onUncheck: function (row) {
      return false;
  onCheckAll: function (rows) {
      return false;
  onUncheckAll: function (rows) {
      return false;
  onCheckSome: function (rows) {
      return false;
  onUncheckSome: function (rows) {
      return false;
  onLoadSuccess: function (data) {
      return false;
  onLoadError: function (status) {
      return false;
  onColumnSwitch: function (field, checked) {
      return false;
  onPageChange: function (number, size) {
      return false;
  onSearch: function (text) {
      return false;
  onToggle: function (cardView) {
      return false;
  onPreBody: function (data) {
      return false;
  onPostBody: function () {
      return false;
  onPostHeader: function () {
      return false;
  onExpandRow: function (index, row, $detail) {
      return false;
  onCollapseRow: function (index, row) {
      return false;
  onRefreshOptions: function (options) {
      return false;
  onRefresh: function (params) {
    return false;
  onResetView: function () {
      return false;
  onScrollBody: function () {
      return false;

This awesome jQuery plugin is developed by wenzhixin. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.03.2018
  • Source