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

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

Table

File Size:	143.13 KB
Views Total:	2076 views
Last Update:	June 28, 2022
Publish Date:	December 16, 2014
Official Website:	Go to website
License:	MIT
Plugin Author:	wenzhixin

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

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.

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">
  <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>@<a href="#">twitter</a></td>
    </tr>
  </tbody>
</table>

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

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

<table class="table" id="example">
</table>
<script>
$('#example').bootstrapTable({
  columns: [{
      field: 'first',
      title: 'First Name'
  }, {
      field: 'last',
      title: 'Last Name'
  }, {
      field: 'handle',
      title: 'Handle'
  }],
  data: [{
      first: 'Mark',
      last: 'Otto',
      handle: '@mdo'
  }, 
  ...
});
</script>

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

var COLUMN_DEFAULTS = {
    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-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>

9. 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');

// 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
$('#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('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);

Done

List Of Version :

Mady

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.