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

Feature-rich Data Table Plugin For Bootstrap
File Size: 143.13 KB
Views Total: 3797 views
Last Update:May 21, 2024
Publish Date: December 16, 2014
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

Bootstrap Data Table is a jQuery Plugin with responsive, dynamic, extendable, multifunctional, and profoundly adjustable jQuery information table module for Bootstrap (5/4/3/2), Bulma, Foundation, Materialize, and Semantic systems.

Table of Contents

  • Dynamic data rendering via AJAX.
  • Data filtering.
  • Data sorting.
  • Data editing.
  • Table pagination.
  • Show/hide specific columns.
  • Fixed table header.
  • Checkable table rows.
  • Expandable and collapsible table rows.
  • Allows to toggle between card view and detail view.
  • Exports data to JSON, XML, CSV, TXT, SQL, and Excel.
  • Useful extensions.
  • Tons of useful options, methods and events.
  • Supports 45+ languages.
  • 5 built-in themes: Bootstrap, Bulma, Foundation, Materialize, and Semantic.
How to usage:

1. Include the Bootstrap Table plugin’s files and extensions of your choice in your Bootstrap project.

<link href="/bootstrap-table.min.css" rel="stylesheet">
<script src="3.5.1/jquery.min.js"></script> 
<script src="/tableExport.min.js"></script>
<script src="/bootstrap-table.min.js"></script>
<script src="/bootstrap-table-locale-all.min.js"></script>
<script src="/bootstrap-table-export.min.js"></script>

2. Load languages you prefer.

<script src="/bootstrap-table-en-US.min.js"></script>

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

<table class="table" data-toggle="table">
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <td>the Bird</td>
      <td>@<a href="#">twitter</a></td>

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

5. 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'

6. Full plugin options to customize your data table.


  // height
  height: undefined,

  // table classes
  classes: 'table table-hover',

  // add custom buttons to the button bar
  buttons: {},

  // thead classes
  theadClasses: '',

  // header style
  headerStyle: function headerStyle(column) {
    return {};

  // undefined text
  undefinedText: '-',

  // local file
  locale: undefined,

  // enables virtual scroll
  virtual<a href="http://www.jquerypost.com/tag/scroll/">Scroll</a>: false,
  virtualScrollItemHeight: undefined,

  // enable sortable
  sortable: true,

  // enable silent sort
  silentSort: true,

  // enable stable sort
  sortStable: false,

  // class name of sortable cell
  sortClass: undefined,

  // custom sort name
  sortName: undefined,

  // or desc
  sortOrder: 'asc',

  // reset the sort on third click
  sortReset: false,

  // remember order direction
  rememberOrder: false,

  // enable server-side sort
  serverSort: true,

  // striped rows
  striped: false,

  // custom sort function
  customSort: $.noop,

  // table columns
  columns: [[]],

  // tabular data
  data: [],

  // filter options
  filterOptions: {
    filterAlgorithm: 'and'

  // total field
  totalField: 'total',

  // total not filtered
  totalNotFilteredField: 'totalNotFiltered',

  // data field
  dataField: 'rows',

  // support server side pagination
  footerField: 'footer',

  // AJAX options
  url: undefined,
  method: 'get',
  ajax: undefined,
  cache: true,
  contentType: 'application/json',
  dataType: 'json',
  ajaxOptions: {},
  queryParams: function (params) {
      return params;
  queryParamsType: 'limit', // undefined
  responseHandler: function (res) {
      return res;

  // pagination options
  pagination: false,
  onlyInfoPagination: false,
  showExtendedPagination: false,
  paginationLoop: true,
  sidePagination: 'client', // client or server
  totalRows: 0, // server side need to set
  totalNotFiltered: 0,
  pageNumber: 1,
  pageSize: 10,
  pageList: [10, 25, 50, 100],
  paginationHAlign: 'right', //right, left
  paginationVAlign: 'bottom', //bottom, top, both
  paginationDetailHAlign: 'left', //right, left
  paginationPreText: '‹',
  paginationNextText: '›',
  paginationSuccessivelySize: 5, // Maximum successively number of pages in a row
  paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
  paginationUseIntermediate: false, // Calculate intermediate pages for quick access
  showPaginationSwitch: false,

  // live search options
  search: false,
  searchHighlight: false,
  searchOnEnterKey: false,
  strictSearch: false,
  searchSelector: false,
  searchAlign: 'right',
  visibleSearch: false
  showButtonIcons: true,
  showButtonText: false,
  showSearchButton: false,
  showSearchClearButton: false,
  trimOnSearch: true,
  searchTimeOut: 500,
  searchText: '',
  customSearch: $.noop,
  searchAccentNeutralise: false,

  // name of radio or checkbox input
  selectItemName: 'btSelectItem',

  // show table header
  showHeader: true,

  // show table footer
  showFooter: false,

  // show specific columns
  showColumns: false,

  // show toggle all
  showColumnsToggleAll: false,

  // shows column search field
  showColumnsSearch: false,

  // show refresh button
  showRefresh: false,

  // show toggle button (card view & detail view)
  showToggle: false,

  // show fullscreen button
  showFullscreen: false,

  // auto display card view
  smartDisplay: true,

  // escape a string for insertion into HTML
  escape: false,

  // minimum number of columns to hide from the columns drop down list.
  minimumCountColumns: 1,

  // which field is an identity field
  idField: undefined,

  // unique identifier for each row
  uniqueId: undefined,

  // enable card view
  cardView: false,

  // detail view
  detailView: false,
  detailFormatter: function (index, row) {
    return '';
  detailFilter: function (index, row) {
    return true;
  detailViewIcon: true,
  detailViewByClick: false,
  detailViewAlign: 'left',

  // click to select
  clickToSelect: false,

  // enable single select
  singleSelect: false,

  // toolbar options
  toolbar: undefined,
  toolbarAlign: 'left',
  buttonsPrefix: null,
  buttonsToolbar: undefined,
  buttonsAlign: 'right',
  buttonsOrder: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],
  checkboxHeader: true,

  // maintain meta data
  maintainMetaData: true,

  // enable multi-row selection
  multipleSelectRow: false,

  // maintain selected
  maintainSelected: false,

  // icon size
  iconSize: undefined,

  // button class
  buttonsClass: bs.buttonsClass,

  // prefix
  iconsPrefix: bs.iconsPrefix, // glyphicon or fa (font awesome)

  // icons
  icons: bs.icons,

  // return true if the click should be ignored
  // false if the click should cause the row to be selected
  ignoreClickToSelectOn: function (element) {
    return $.inArray(element.tagName, ['A', 'BUTTON']);

  // row style
  rowStyle: function (row, index) {
    return {};

  // row attributes
  rowAttributes: function (row, index) {
    return {};

  // footer style
  footerStyle: function (row, index) {
    return {};

  // font size of the loading text
  loadingFontSize: 'auto',

  // custom loading template
  loadingTemplate: function loadingTemplate(loadingMessage) {
    return "<span class=\"loading-wrap\">\n      <span class=\"loading-text\">".concat(loadingMessage, "</span>\n      <span class=\"animation-wrap\"><span class=\"animation-dot\"></span></span>\n      </span>\n    ");


7. Customize columns with the following options.

    field: undefined,
    title: undefined,
    title<a href="http://www.jquerypost.com/category/animation/">Animation</a>: undefined,
    'class': undefined,
    width: undefined,
    widthUnit: 'px',
    rowspan: undefined,
    colspan: undefined,
    align: undefined,
    // left, right, center
    halign: undefined,
    // left, right, center
    falign: undefined,
    // left, right, center
    valign: undefined,
    // top, middle, bottom
    cellStyle: undefined,
    radio: false,
    checkbox: false,
    checkboxEnabled: true,
    clickToSelect: true,
    showSelectTitle: false,
    sortable: false,
    sortName: undefined,
    order: 'asc',
    // asc, desc
    sorter: undefined,
    visible: true,
    switchable: true,
    cardVisible: true,
    searchable: true,
    formatter: undefined,
    footerFormatter: undefined,
    detailFormatter: undefined,
    searchFormatter: true,
    searchHighlightFormatter: false,
    escape: false,
    events: undefined

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

<table id="table"
   data-page-list="[10, 25, 50, 100, ALL]"
      <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

9. Callback functions and event handlers.

$('#example').on('eventName.bs.table', function (e, arg1, arg2, ...) {
  // ...

// or 

  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

// up<a href="http://www.jquerypost.com/tag/calendar/">date</a>s the options
$('#example').bootstrapTable('refreshOptions', OPTIONS)

// gets the table data
$('#example').bootstrapTable('getData', useCurrentPage(True Or False), includeHiddenRows(True Or False), unfiltered)

// gets the selected rows

// gets all the selected rows

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

// inserts a new row to the table
$('#example').bootstrapTable('insertRow', Index, rowData);

// updates a row
$('#example').bootstrapTable('updateRow', Index, rowData, Replace(True Or False));

// gets data by unique ID
$('#example').bootstrapTable('getRowByUniqueId', Id);

// updates specified rows
$('#example').bootstrapTable('updateByUniqueId', ID, rowData, Replace(True Or False));

// removes data
$('#example').bootstrapTable('remove', {field: 'id', values: ids}).

// removes data by unique ID
$('#example').bootstrapTable('removeByUniqueId', Id);

// updates a cell
$('#example').bootstrapTable('updateCel', Index, fieldName, Value);

// updates data
$('#example').bootstrapTable('updateCell', {index: 1, field: 'name', value: 'Updated Name'}).

// updates a cell by unique ID
$('#example').bootstrapTable('updateCellByUniqueId', Id, fieldName, Value);

// shows the row
$('#example').bootstrapTable('showRow', Index, Id);

// hides a row
$('#example').bootstrapTable('hideRow', Index, Id);

// gets hidden rows
$('#example').bootstrapTable('getHiddenRows', Show(True or False));

// shows the column
$('#example').bootstrapTable('showColumn', Field);

// hides a column
$('#example').bootstrapTable('hideColumn', Field);

// gets visible columns

// gets hidden columns

// shows all columns

// hides all columns

// merges cells
$('#example').bootstrapTable('mergeCells', Index, fieldName, rowSpan, colSpan);

// selects all rows

// unchecks al rows

// inverts the selection

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

// resets the table view
$('#example').bootstrapTable('resetView', Height);

// resets the width

// shows loading status

// hides loading status

// toggles pagination controls

// toggles the fullscreen mode

// toggles between table/card views

// resets the search

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

// goes to a specific page
$('#example').bootstrapTable('selectPage', Page);

// goes to the prev page

// goes to the next page

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

// collapses all rows

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


Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.