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

Feature-rich Data Table Plugin For Bootstrap 4/3/2
File Size: 2.55 MB
Views Total:
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 4, Bootstrap 3 and Bootstrap 2.

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.

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

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

4. 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'
  }, 
  ...
});

5. Full plugin options to customize your data table.

$('#example').bootstrapTable({

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

  // thead classes
  theadClasses: '',

  // 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;',
  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

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

7. Callback functions:

$('#example').bootstrapTable({

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

Changelog:

v1.14.2 (2019-03-19)

  • New(fixed-columns extension): Added new version fixed-columns extension.
  • New(js): Updated the style of loading message.
  • Update(js): Updated refresh event params.
  • Update(locale): Updated all locale translation with English as default.
  • Update(export extension): Fixed export all rows to pdf bug.
  • Update(export extension): Disabled export button when exportDataType is 'selected' and selection empty.
  • Update(addrbar extension): Fixed addrbar extension remove hash from url bug.

v1.14.1 (2019-03-06)

  • New(css): Added CSS Frameworks supported.
  • New(css): Added Semantic UI theme.
  • New(css): Added Bulma theme.
  • New(css): Added Materialize theme.
  • New(css): Added Foundation theme.
  • New(js): Added data attribute support for ignoreClickToSelectOn option.
  • Update(js): Fixed detailView find td elements bug.
  • Update(js): Fixed showColumns close dropdown bug when item label clicking.
  • Update(js): Fixed reset width error after toggleFullscreen.
  • Update(js): Fixed cardview click event bug.-in-vanilla-javascript-multiselect

v1.13.5 (2019-02-23)

  • New(auto-refresh extension): Rewrote auto-refresh extension to ES6.
  • Update(js): Fixed showFullscreen cannot work bug.
  • Update(js): Redefined customSearch option.
  • Update(js): Fixed show footer cannot work bug.
  • Update(js): Updated the parameter of footerStyle.
  • Update(js): Added classes supported for footerStyle.
  • Update(js): Fixed IE11 transform bug.
  • Update(js): Removed beginning and end whitespace from td.
  • Update(export extension): Fixed export selected bug.

v1.13.5 (2019-02-19)

  • Update(js): Fixed showFullscreen cannot work bug.
  • Update(js): Redefined customSearch option.
  • Update(js): Fixed show footer cannot work bug.
  • Update(js): Fixed IE11 transform bug.

v1.13.4 (2019-02-05)

  • New(sticky-header extension): Rewrote sticky-header extension to ES6.
  • New(sticky-header extension): Added to support bootstrap v4 and theadClasses option.
  • New(auto-refresh extension): Icons update to font-awesome 5.
  • New(examples): Added examples Algolia search.
  • Update(js): Fixed theadClasses is not set when a thead exists.
  • Update(js): Fixed table resize after mergeCell the first row.
  • Update(cookie extension): Fixed cookie extension broken bug.
  • Update(cookie extension): Fixed cookie extension unicode encode bug.
  • Update(package): Added sass devDependencies.

v1.13.3 (2019-02-05)

  • New(js): Supported full table classes of bootstrap v4.
  • New(css): Rewrote bootstrap-table.css to scss.
  • New(accent-neutralise extension): Rewrote accent-neutralise extension to ES6.
  • New(addrbar extension): Rewrote addrbar extension to ES6 and supported attribute option.
  • New(group-by-v2 extension): New groupByFormatter option.
  • New(pipeline extension): New pipeline extension bootstrap-table-pipeline.
  • Remove(js): Removed striped option and use classes instead.
  • Update(js): Fixed locale option bug.
  • Update(js): Fixed sortClass option bug.
  • Update(js): Fixed sortStable option cannot work bug.
  • Update(js): Improved built-in sort function and customSort logic.
  • Update(js): Fixed horizontal scrollbar bug.
  • Update(cookie extension): Improved cookie extension code.

 

v1.13.2 (2019-01-18)

  • New(js): Added paginationSuccessivelySize, paginationPagesBySide and paginationUseIntermediate pagination options.
  • New(cookie extension): Rewrited cookie extension to ES6.
  • New(cookie extension): Saved filterBy method.
  • New(filter-control extension): Added placeholder as a empty option to the select controls.
  • New(filter-control extension): Added clearFilterControl method in order to clear all filter controls.
  • New(docs) Added algolia search.
  • Update(js): Fixed sort column shows hidden rows in server side pagination bug.
  • Update(js): Fixed scrollTo bug.
  • Update(css): Fixed no-bordered problem of bootstrap v4.
  • Update(filter-control extension): Added bootstrap v4 icon support.

v1.13.1 (2019-01-01)

  • feat(js): add theadClasses option to supoort bootstrap v4
  • feat(js):icons update to font-awesome 5
  • feat(locale): rewrite all locales to ES6
  • feat(editable extension): rewrite bootstrap-table-editable to ES6
  • feat(filter-control extension): rewrite bootstrap-table-filter-control to ES6
  • feat(treegrid extension): add rootParentId option
  • fix(js): getHiddenRows method bug
  • fix(js): getOptions method remove data property
  • fix(js): no matches display error
  • fix(js): fix eslint warning and error
  • fix(locale): improve es-ES locale
  • fix(filter-control extension):multiple choice bug
  • fix(filter-control extension): select all rows and keyup event error
  • fix(export extension): export in cardView display error

v1.13.0 (2018-12-28)

  • feat(js): rewrite bootstrap-table to ES6
  • feat(locale): add fi-FI.js locale
  • feat(build): use babel instead grunt
  • feat(filter-control): add created-controls.bs.table event to filter-control
  • feat(export extension): rewrite export extension to ES6
  • feat(export extension): export extension support bootstrap v4
  • feat(export extension): add exportTable method
  • feat(toolbar extension): rewrite toolbar extension to ES6
  • feat(toolbar extension): toolbar extension supports bootstrap v4
  • feat(toolbar extension): add server sidePagination support
  • feat(resizable extension): new resizable extension version 2.0.0
  • feat(editable extension): allow different x-editable configuration per table row
  • feat(addrbar extension): add addrbar extension
  • fix(js): improve check/uncheck methods
  • fix(js): cookie with pageNumber and searchText bug
  • fix(js): selections bugs
  • fix(js): customSearch support data attribute
  • fix(js): can't search data with formatter
  • fix(js): getRowByUniqueId error when row unique id is undefined
  • fix(js): fix older bootstrap version bug
  • fix(css): remove toolbar line-height
  • fix(css): limit fullscreen CSS rule scope
  • fix(editable extension): editable formatter bug
  • fix(extension): bug with export extension together
  • fix(extension): remove lick-edit-row and flat-json extensions

v1.12.2 (2018-11-30)

  • Bugfix

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