Function-rich Information Desk Plugin For Bootstrap 5/4/3/2

Bootstrap Desk is a responsive, dynamic, extendable, multifunctional, and highly-customizable jQuery information desk plugin for Bootstrap (5/4/3/2), Bulma, Basis, Materialize, and Semantic frameworks.

Options:

• Dynamic information rendering through AJAX.
• Information filtering.
• Information sorting.
• Information enhancing.
• Desk pagination.
• Present/cover particular columns.
• Mounted desk header.
• Checkable desk rows.
• Expandable and collapsible desk rows.
• Permits to toggle between card view and element view.
• Exports information to JSON, XML, CSV, TXT, SQL, and Excel.
• Helpful extensions.
• Tons of helpful choices, strategies and occasions.
• Helps 45+ languages.
• 5 built-in themes: Bootstrap, Bulma, Basis, Materialize, and Semantic.

Desk Of Contents:

Fundamental utilization:

1. Embrace the Bootstrap Desk plugin’s information and extensions of your selection in your Bootstrap venture.

<!-- Dependencies -->
<hyperlink 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 Desk Plugin -->
<hyperlink rel="stylesheet" href="bootstrap-table.css">
<script src="bootstrap-table.js"></script>
<!-- Bulma Theme -->
<hyperlink rel="stylesheet" href="thems/bulma/bootstrap-table-bulma.css">
<script src="thems/bulma/bootstrap-table-bulma.js"></script>
<!-- Basis Themes -->
<hyperlink rel="stylesheet" href="thems/bulma/bootstrap-table-foundation.css">
<script src="thems/bulma/bootstrap-table-foundation.js"></script>
<!-- Materialize Themes -->
<hyperlink rel="stylesheet" href="thems/bulma/bootstrap-table-materialize.css">
<script src="thems/bulma/bootstrap-table-materialize.js"></script>
<!-- Semantic Themes -->
<hyperlink rel="stylesheet" href="thems/bulma/bootstrap-table-semantic.css">
<script src="thems/bulma/bootstrap-table-semantic.js"></script>

2. Embrace the Bootstrap Desk plugin’s extensions:

<!-- use the question params within the deal with bar  -->
<script src="extensions/addrbar/bootstrap-table-addrbar.js"></script>

<!-- auto refresh desk  -->
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>

<!-- allow cookies  -->
<script src="extensions/cookie/bootstrap-table-cookie.js"></script>

<!-- lets you copy desk rows  -->
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>

<!-- {custom} desk view  -->
<script src="extensions/custom-view/bootstrap-table-custom-view.js"></script>

<!-- use data-defer-url as an alternative of data-url  -->
<script src="extensions/defer-url/bootstrap-table-defer-url.js"></script>

<!-- editable desk  -->
<script src="extensions/editable/bootstrap-table-editable.js"></script>

<!-- exports desk information to 'json', 'xml', 'csv', 'txt', 'sql', 'excel', and so forth  -->
<script src="extensions/export/bootstrap-table-export.js"></script>

<!-- allows filter controls  -->
<hyperlink rel="stylesheet" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

<!-- makes desk columns fastened  -->
<hyperlink rel="stylesheet" src="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
<script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>

<!-- teams the information by the sphere  -->
<hyperlink 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 assist  -->
<script src="extensions/i18n-enhance/bootstrap-table-i18n-enhance.js"></script>

<!-- allows key occasions  -->
<script src="extensions/key-events/bootstrap-table-key-events.js"></script>

<!-- responsive & cell pleasant desk view  -->
<script src="extensions/cell/bootstrap-table-mobile.js"></script>

<!-- allows multi-sort  -->
<script src="extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>

<!-- permits to leap to a selected web page  -->
<hyperlink rel="stylesheet" href="extensions/page-jump-to/bootstrap-table-jump-to.css"></type>
<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 desk through drag and drop  -->
<hyperlink 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>

<!-- permits to reorder desk rows  -->
<hyperlink 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 desk  -->
<script src="extensions/resizable/bootstrap-table-resizable.js"></script>

<!-- sticky desk header  -->
<script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>

<!-- allows toolbar  -->
<script src="extensions/toolbar/bootstrap-table-toolbar.js"></script>

<!-- allows tree grid  -->
<script src="extensions/treegrid/bootstrap-table-treegrid.js"></script>

3. Load languages you favor. You will discover all languages below the native folder.

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

4. Turns a regular HTML desk into a knowledge desk utilizing the data-toggle="desk" attribute.

<desk class="desk" data-toggle="desk">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Final</th>
      <th scope="col">Deal with</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fats</td>
    </tr>
    <tr>
      <td>Larry</td>
      <td>the Fowl</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</desk>

5. To load tabular information from an exterior JSON file:

<desk class="desk" data-toggle="desk" data-url="information.json">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Final</th>
      <th scope="col">Deal with</th>
    </tr>
  </thead>
</desk>

6. You too can initialize the information desk and outline the tabular information within the JavaScript as these:

<desk class="desk" id="instance">
</desk>

$('#instance').bootstrapTable({
  columns: [{
      field: 'first',
      title: 'First Name'
  }, {
      field: 'last',
      title: 'Last Name'
  }, {
      field: 'handle',
      title: 'Handle'
  }],
  information: [{
      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 information
  information: [],

  // filter choices
  filterOptions: {
    filterAlgorithm: 'and'
  },

  // whole subject
  totalField: 'whole',

  // whole not filtered
  totalNotFilteredField: 'totalNotFiltered',

  // information subject
  dataField: 'rows',

  // assist server aspect pagination
  footerField: 'footer',

  // AJAX choices
  url: undefined,
  technique: 'get',
  ajax: undefined,
  cache: true,
  contentType: 'software/json',
  dataType: 'json',
  ajaxOptions: {},
  queryParams: operate (params) {
      return params;
  },
  queryParamsType: 'restrict', // undefined
  responseHandler: operate (res) {
      return res;
  },

  // pagination choices
  pagination: false,
  onlyInfoPagination: false,
  showExtendedPagination: false,
  paginationLoop: true,
  sidePagination: 'shopper', // shopper or server
  totalRows: 0, // server aspect must set
  totalNotFiltered: 0,
  pageNumber: 1,
  pageSize: 10,
  pageList: [10, 25, 50, 100],
  paginationHAlign: 'proper', //proper, left
  paginationVAlign: 'backside', //backside, high, each
  paginationDetailHAlign: 'left', //proper, left
  paginationPreText: '‹',
  paginationNextText: '›',
  paginationSuccessivelySize: 5, // Most successively variety of pages in a row
  paginationPagesBySide: 1, // Variety of pages on both sides (proper, left) of the present web page.
  paginationUseIntermediate: false, // Calculate intermediate pages for fast entry
  showPaginationSwitch: false,

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

  // identify of radio or checkbox enter
  selectItemName: 'btSelectItem',

  // present desk header
  showHeader: true,

  // present desk footer
  showFooter: false,

  // present particular columns
  showColumns: false,

  // present toggle all
  showColumnsToggleAll: false,

  // exhibits column search subject
  showColumnsSearch: false,

  // present refresh button
  showRefresh: false,

  // present toggle button (card view & element view)
  showToggle: false,

  // present fullscreen button
  showFullscreen: false,

  // auto show card view
  smartDisplay: true,

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

  // minimal variety of columns to cover from the columns drop down record.
  minimumCountColumns: 1,

  // which subject is an identification subject
  idField: undefined,

  // distinctive identifier for every row
  uniqueId: undefined,

  // allow card view
  cardView: false,

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

  // click on to pick out
  clickToSelect: false,

  // allow single choose
  singleSelect: false,

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

  // keep meta information
  maintainMetaData: true,

  // allow multi-row choice
  multipleSelectRow: false,

  // keep chosen
  maintainSelected: false,

  // icon dimension
  iconSize: undefined,

  // button class
  buttonsClass: bs.buttonsClass,

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

  // icons
  icons: bs.icons,

  // return true if the press ought to be ignored
  // false if the press ought to trigger the row to be chosen
  ignoreClickToSelectOn: operate (aspect) {
    return $.inArray(aspect.tagName, ['A', 'BUTTON']);
  },

  // row type
  rowStyle: operate (row, index) {
    return {};
  },

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

  // footer type
  footerStyle: operate (row, index) {
    return {};
  },

  // font dimension of the loading textual content
  loadingFontSize: 'auto',

  // {custom} loading template
  loadingTemplate: operate 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. Customise columns with the next choices.

var COLUMN_DEFAULTS = {
    subject: undefined,
    title: undefined,
    titleTooltip: undefined,
    'class': undefined,
    width: undefined,
    widthUnit: 'px',
    rowspan: undefined,
    colspan: undefined,
    align: undefined,
    // left, proper, middle
    halign: undefined,
    // left, proper, middle
    falign: undefined,
    // left, proper, middle
    valign: undefined,
    // high, center, backside
    cellStyle: undefined,
    radio: false,
    checkbox: false,
    checkboxEnabled: true,
    clickToSelect: true,
    showSelectTitle: false,
    sortable: false,
    sortName: undefined,
    order: 'asc',
    // asc, desc
    sorter: undefined,
    seen: true,
    switchable: true,
    cardVisible: true,
    searchable: true,
    formatter: undefined,
    footerFormatter: undefined,
    detailFormatter: undefined,
    searchFormatter: true,
    searchHighlightFormatter: false,
    escape: false,
    occasions: undefined
};

9. You too can cross the choices through data-OPTION attributes as these:

<desk id="desk"
   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/information"
   data-response-handler="responseHandler">
   <thead>
    <tr>
      <th data-field="id" data-halign="proper" data-align="middle">Merchandise ID</th>
      <th data-field="identify" data-halign="middle" data-align="left">Merchandise Title</th>
      <th data-field="value" data-halign="left" data-align="proper">Merchandise
    </tr>
  </thead>
</desk>

10. Callback capabilities and occasion handlers.

$('#instance').on('eventName.bs.desk', operate (e, arg1, arg2, ...) {
  // ...
}))

// or 
$('#instance').bootstrapTable({

  onAll: operate onAll(identify, args) {
    return false;
  },
  onClickCell: operate onClickCell(subject, worth, row, $aspect) {
    return false;
  },
  onDblClickCell: operate onDblClickCell(subject, worth, row, $aspect) {
    return false;
  },
  onClickRow: operate onClickRow(merchandise, $aspect) {
    return false;
  },
  onDblClickRow: operate onDblClickRow(merchandise, $aspect) {
    return false;
  },
  onSort: operate onSort(identify, order) {
    return false;
  },
  onCheck: operate onCheck(row) {
    return false;
  },
  onUncheck: operate onUncheck(row) {
    return false;
  },
  onCheckAll: operate onCheckAll(rows) {
    return false;
  },
  onUncheckAll: operate onUncheckAll(rows) {
    return false;
  },
  onCheckSome: operate onCheckSome(rows) {
    return false;
  },
  onUncheckSome: operate onUncheckSome(rows) {
    return false;
  },
  onLoadSuccess: operate onLoadSuccess(information) {
    return false;
  },
  onLoadError: operate onLoadError(standing) {
    return false;
  },
  onColumnSwitch: operate onColumnSwitch(subject, checked) {
    return false;
  },
  onPageChange: operate onPageChange(quantity, dimension) {
    return false;
  },
  onSearch: operate onSearch(textual content) {
    return false;
  },
  onToggle: operate onToggle(cardView) {
    return false;
  },
  onPreBody: operate onPreBody(information) {
    return false;
  },
  onPostBody: operate onPostBody() {
    return false;
  },
  onPostHeader: operate onPostHeader() {
    return false;
  },
  onPostFooter: operate onPostFooter() {
    return false;
  },
  onExpandRow: operate onExpandRow(index, row, $element) {
    return false;
  },
  onCollapseRow: operate onCollapseRow(index, row) {
    return false;
  },
  onRefreshOptions: operate onRefreshOptions(choices) {
    return false;
  },
  onRefresh: operate onRefresh(params) {
    return false;
  },
  onResetView: operate onResetView() {
    return false;
  },
  onScrollBody: operate onScrollBody() {
    return false;
  }
  
});

11. API strategies:

// returns the choices object
$('#instance').bootstrapTable('getOptions');

// updates the choices
$('#instance').bootstrapTable('refreshOptions', OPTIONS)

// will get the desk information
$('#instance').bootstrapTable('getData', useCurrentPage(True Or False), includeHiddenRows(True Or False), unfiltered)

// will get the chosen rows
$('#instance').bootstrapTable('getSelections')

// will get all the chosen rows
$('#instance').bootstrapTable('getAllSelections');

// hundreds information into the desk
$('#instance').bootstrapTable('load', Information);

// appends information to the desk
$('#instance').bootstrapTable('append', Information);

// prepends information
$('#instance').bootstrapTable('prepend', Information);

// removes information from the desk
$('#instance').bootstrapTable('getOptions', fieldName, Values);

// removes all information
$('#instance').bootstrapTable('removeAll');

// inserts a brand new row to the desk
$('#instance').bootstrapTable('insertRow', Index, rowData);

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

// will get information by distinctive ID
$('#instance').bootstrapTable('getRowByUniqueId', Id);

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

// removes information
$('#instance').bootstrapTable('take away', {subject: 'id', values: ids}).

// removes information by distinctive ID
$('#instance').bootstrapTable('removeByUniqueId', Id);

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

// updates information
$('#instance').bootstrapTable('updateCell', {index: 1, subject: 'identify', worth: 'Up to date Title'}).

// updates a cell by distinctive ID
$('#instance').bootstrapTable('updateCellByUniqueId', Id, fieldName, Worth);

// exhibits the row
$('#instance').bootstrapTable('showRow', Index, Id);

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

// will get hidden rows
$('#instance').bootstrapTable('getHiddenRows', Present(True or False));

// exhibits the column
$('#instance').bootstrapTable('showColumn', Discipline);

// hides a column
$('#instance').bootstrapTable('hideColumn', Discipline);

// will get seen columns
$('#instance').bootstrapTable('getVisibleColumns');

// will get hidden columns
$('#instance').bootstrapTable('getHiddenColumns');

// exhibits all columns
$('#instance').bootstrapTable('showAllColumns');

// hides all columns
$('#instance').bootstrapTable('hideAllColumns');

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

// selects all rows
$('#instance').bootstrapTable('checkAll');

// unchecks al rows
$('#instance').bootstrapTable('uncheckAll');

// inverts the choice
$('#instance').bootstrapTable('checkInvert');

// selects a selected row
$('#instance').bootstrapTable('examine', Index);

// unchecks a selected row
$('#instance').bootstrapTable('uncheck', Index);

// selects a row by array of values
$('#instance').bootstrapTable('checkBy', fieldName, Values);

// unchecks a row by array of values
$('#instance').bootstrapTable('uncheckBy', fieldName, Values);

// refreshes/reloads the distant server information
$('#instance').bootstrapTable('refresh', Information);

// destroys the occasion
$('#instance').bootstrapTable('destroy');

// resets the desk view
$('#instance').bootstrapTable('resetView', Peak);

// resets the width
$('#instance').bootstrapTable('resetWidth');

// exhibits loading standing
$('#instance').bootstrapTable('showLoading');

// hides loading standing
$('#instance').bootstrapTable('hideLoading');

// toggles pagination controls
$('#instance').bootstrapTable('togglePagination');

// toggles the fullscreen mode
$('#instance').bootstrapTable('toggleFullscreen');

// toggles between desk/card views
$('#instance').bootstrapTable('toggleView');

// resets the search
$('#instance').bootstrapTable('resetSearch');

// filters the desk
$('#instance').bootstrapTable('filterBy', Filter, Choices);

// scrolls to a selected level
$('#instance').bootstrapTable('scrollTo', Worth(px) or {unit: 'px', worth: 0});

// will get the present scroll place
$('#instance').bootstrapTable('getScrollPosition');

// goes to a selected web page
$('#instance').bootstrapTable('selectPage', Web page);

// goes to the prev web page
$('#instance').bootstrapTable('prevPage');

// goes to the subsequent web page
$('#instance').bootstrapTable('nextPage');

// toggles the small print view
$('#instance').bootstrapTable('toggleDetailView', Index);

// expands a row
$('#instance').bootstrapTable('expandRow', Index);

// collapses a row
$('#instance').bootstrapTable('collapseRow', Index);

// expands all rows
$('#instance').bootstrapTable('expandAllRows');

// collapses all rows
$('#instance').bootstrapTable('collapseAllRows');

// expands row by distinctive ID
$('#instance').bootstrapTable('expandRowByUniqueId', uniqueID);

// collapses row by distinctive ID
$('#instance').bootstrapTable('collapseRowByUniqueId', uniqueID);

// updates the column title
$('#instance').bootstrapTable('updateColumnTitle', fieldName, Title);

// updates format textual content
$('#instance').bootstrapTable('updateFormatText', formatName, textual content);

12. Extension choices.

{

  /*** Addrbar ***/

  // allow the extension
  // information attribute: data-addrbar
  addrbar: false,

  // the prefix of the question params, it ought to be used for multi tables
  // parameters:
  // web page: web page quantity
  // dimension: web page dimension
  // order: asc/dsc
  // kind: the type key phrase
  // search: search key phrase
  // information attribute: data-addr-prefix
  addrPrefix: '',

  /*** Auto Refresh ***/

  // use the extension
  // information attribute: data-auto-refresh
  autoRefresh: false,

  // interval in ms
  // information attribute: data-auto-refresh-interval
  autoRefreshInterval: 60,

  // auto refresh silently
  // information attribute: data-auto-refresh-silent
  autoRefreshSilent: true,

  // set true to allow auto refresh
  // information attribute: data-auto-refresh-status
  autoRefreshStatus: true,

  /*** Cookie ***/

  // use the extension
  // information attribute: data-cookie
  cookie: false,

  // delete cookies along with your {custom} operate
  // information attribute: data-cookie-custom-storage-delete
  cookieCustomStorageDelete: operate(cookieName){},

  // get the saved worth out of your {custom} operate
  // information attribute: data-cookie-custom-storage-get
  cookieCustomStorageGet: operate(cookieName){},

  // save values along with your {custom} operate
  // information attribute: data-cookie-custom-storage-set
  cookieCustomStorageSet: operate(cookieName, worth){},

  // area identify (string)
  // information attribute: data-cookie-domain
  cookieDomain: null,

  // expire date: 's', 'mi', 'h', 'd', 'm', 'y'
  // information attribute: data-cookie-expire
  cookieExpire: '2h',

  // cookie ID
  // information attribute: data-cookie-id-table
  cookieIdTable: '',

  // cookie path
  // information attribute: data-cookie-path
  cookiePath: null,

  // use cookies solely through safe/encrypted connections
  // information attribute: data-cookie-secure
  cookieSecure: null,

  // outline the worth of the SameSite cookie attribute
  // information attribute: data-cookie-same-site
  cookieSameSite: 'lax',

  // cookieStorage or localStorage or sessionStorage or customStorage
  // information attribute: data-cookie-storage
  cookieStorage: 'cookieStorage',

  // Set this array with the desk properties (sortOrder, sortName, pageNumber, pageList, columns, searchText, filterControl) that you just need to save
  // information 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 ***/

  // present the copy row button
  // information attribute: data-show-copy-rows
  showCopyRows: false,

  // delimiter
  // information attribute: data-copy-delimiter
  copyDelimiter: ', ',

  // add new strains when copying
  // information attribute: data-copy-newline
  copyNewline: 'n',

  // copy hidden rows
  // information attribute: data-copy-width-hidden
  copyWithHidden: false,

  /*** Customized View ***/

  // allow the extension
  // information attribute: data-custom-view
  customView: false,

  // present the {custom} view
  // information attribute: data-show-custom-view
  showCustomView: false,

  // present the {custom} view button
  // information attribute: data-show-custom-view-button
  showCustomViewButton: false,

  /*** Defer URL ***/

  // use data-defer-url as an alternative of data-url
  // information attribute: data-defer-url
  deferUrl: null,

  /*** Editable ***/

  // allow the extension
  // information attribute: data-editable
  editable: false,

  // !!! Column choices
  // information attribute: data-always-use-formatter
  alwaysUseFormatter: false,

  // !!! Column choices
  // information attribute: data-editable
  editable: false,

  /*** Export ***/

  // allow the extension
  // information attribute: data-show-export
  showExport: false,

  // 'fundamental', 'all', 'chosen'
  // information attribute: data-export-data-type
  exportDataType: 'fundamental',

  // export the desk footer
  // information attribute: data-export-footer
  exportFooter: false,

  // tableExport.jquery.plugin choices
  // https://github.com/hhurz/tableExport.jquery.plugin#choices
  // information attribute: data-export-options
  exportOptions: null,

  // 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'
  // information attribute: data-export-types
  exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],

  // !!! Column choices
  // information attribute: data-force-export
  forceExport: false,

  // !!! Column choices
  // information attribute: data-force-hide
  forceHide: false,

  /*** Filter Management ***/

  // allow the extension
  // information attribute: data-filter-control
  filterControl: true,

  // present/cover the filter
  // information attribute: data-filter-control-visible
  filterControlVisible: false,

  // left, proper or auto
  // information attribute: data-alignment-select-control-options
  alignmentSelectControlOptions: undefined,

  // disable the filter when looking
  // information attribute: data-disable-control-when-search
  disableControlWhenSearch: false,

  // set to #filter to permit {custom} enter filter in a aspect with the id filter. 
  // Every filter aspect (enter or choose) should have the next class: bootstrap-table-filter-control-<FieldName>
  // information attribute: data-filter-control-container
  filterControlContainer: false,

  // operate to gather information
  // information attribute: data-filter-data-collector
  filterDataCollector: operate(){},

  // cover unused choose choices
  // information attribute: data-hide-unused-select-options
  hideUnusedSelectOptions: false,

  // information attribute: data-search-on-enter-key
  searchOnEnterKey: true,

  // present the filter management swap button
  // information attribute: data-show-filter-control-switch
  showFilterControlSwitch: false,

  // !!! Column choices
  // information attribute: data-filter-control
  filterControl: true,

  // !!! Column choices
  // information attribute: data-filter-control-placeholder
  filterControlPlaceholder: '',

  // !!! Column choices
  // information attribute: data-filter-custom-search
  filterCustomSearch: operate(textual content, worth, filed, information){},

  // !!! Column choices
  // set {custom} choose filter values
  // use var:variable to load from a variable 
  // obj:variable.key to load from a object 
  // url:http://www.instance.com/information.json to load from a distant json file 
  // json:{key:information} to load from a json string
  // func:functionName to load from a operate.
  // information attribute: data-filter-data
  filterData: undefined,

  // !!! Column choices
  // e.g. {"autoclose":true, "clearBtn": true, "todayHighlight": true}
  // information attribute: data-filter-datepicker-options
  filterDatepickerOptions: undefined,

  // !!! Column choices
  // set the default worth of the filter
  // information attribute: data-filter-default
  filterDefault: '',

  // !!! Column choices
  // or 'desc', or 'server'
  // information attribute: data-filter-order-by
  filterOrderBy: 'asc',

  // !!! Column choices
  // information attribute: data-filter-starts-with-search
  filterStartsWithSearch: false,

  // !!! Column choices
  // information attribute: data-filter-strict-search
  filterStrictSearch: false,

  /*** Mounted Columns ***/

  // allow the extension
  // information attribute: data-fixed-columns
  fixedColumns: true,

  // variety of left columns to be fastened
  // information attribute: data-fixed-number
  fixedNumber: 0,

  // variety of proper columns to be fastened
  // information attribute: data-fixed-right-number
  fixedRightNumber: 0,

  /*** Group By ***/

  // allow the extension
  // information attribute: data-group-by
  groupBy: false,

  // set the sphere identify(s) you need to group the information
  // string or array
  // information attribute: data-group-by-field
  groupByField: '',

  // group by a {custom} operate
  // information attribute: data-group-by-formatter
  groupByFormatter: operate(worth, idx, information){},

  // enable to break down/increase teams
  // information attribute: data-group-by-toggle
  groupByToggle: false,

  // present collapse/increase toggle icons
  // information attribute: data-group-by-show-toggle-icon
  groupByShowToggleIcon: false,

  // array or operate
  // information attribute: data-group-by-collapsed-groups
  groupByCollapsedGroups:  [],

  /*** Key Occasions ***/

  // allow the extension
  // information attribute: data-key-events
  keyEvents: false,

  /*** Cellular ***/

  // allow the extension
  // information attribute: data-check-on-init
  checkOnInit: true,

  // cover these columns within the cardView mode.
  // information attribute: data-columns-hidden
  columnsHidden: [],

  // information attribute: data-min-height
  minHeight: undefined,

  // information attribute: data-min-width
  minWidth: 562,

  // change the view between card and desk relying on the width and peak
  // information attribute: data-mobile-responsive
  cellResponsive: false,

  /*** A number of Type ***/

  // allow the extension
  // information attribute: data-show-multi-sort
  showMultiSort: false,

  // information attribute: data-show-multi-sort-button
  showMultiSortButton: true,

  // information attribute: data-multi-sort-strict-sort
  multiSortStrictSort: false,

  // e.g. [{"sortName": "forks_count","sortOrder":"desc"},{"sortName":"stargazers_count","sortOrder":"desc"}]
  // information attribute: data-sort-priority
  sortPriority: undefined,

  /*** Web page Leap To ***/

  // allow the extension
  // information attribute: data-show-jump-to
  showJumpTo: false,

  // Present the bounce to web page management provided that the full variety of pages is bigger than or equal to this worth
  // information attribute: data-show-jump-to-by-pages
  showJumpToByPages: 0,

  /*** Print ***/

  // allow the extension
  // information attribute: data-show-print
  showPrint: false,

  // information attribute: data-print-as-filtered-and-sorted-on-ui
  printAsFilteredAndSortedOnUI: true,

  // information attribute: data-print-page-builder
  printPageBuilder: operate(desk){return printPageBuilderDefault(desk)}

  // set the column subject identify to kind
  // information attribute: data-print-sort-column
  printSortColumn: '',

  // or 'desc'
  // information attribute: data-print-sort-order
  printSortOrder: 'asc',

  /*** Reorder Rows ***/

  // allow the extension
  // information attribute: data-reorderable-rows
  reorderableRows: false,

  // information attribute: data-on-drag-style
  onDragStyle: '',

  // information attribute: data-on-drag-class
  onDragClass: 10,

  // information attribute: data-on-drop-style
  onDropStyle: 10,

  // information attribute: data-on-reorder-rows-drag
  onReorderRowsDrag: operate(){},

  // information attribute: data-on-reorder-rows-drop
  onReorderRowsDrop: operate(){},

  // information attribute: data-drag-handle
  dragHandle: '>tbody>tr>td',

  // information attribute: data-use-row-attr-func
  useRowAttrFunc: false,

  /*** Resizable ***/

  // allow the extension
  // information attribute: data-resizable
  resizable: false,

  /*** Sticky Header ***/

  // allow the extension
  // information attribute: data-sticky-header
  stickyHeader: false,

  // information attribute: data-sticky-header-offset-left
  stickyHeaderOffsetLeft: 0,

  // information attribute: data-sticky-header-offset-right
  stickyHeaderOffsetRight: 0,

  // information attribute: data-sticky-header-offset-y
  stickyHeaderOffsetY: 0,

  /*** Toolbar ***/

  // information attribute: data-advanced-search
  advancedSearch: false,

  // set the motion of the shape
  // information attribute: data-action-form
  actionForm: '',

  // type ID
  // information attribute: data-id-form
  idForm: '',

  // desk ID
  // information attribute: data-id-table
  idTable: 0,

  /*** Treegrid ***/

  // information attribute: data-tree-enable
  treeEnable: false,

  // set the idField
  // information attribute: data-id-field
  idField: 'id',

  // set the mum or dad ID
  // information attribute: data-parent-id-field
  parentIdField: '',

  // information attribute: data-tree-show-field
  treeShowField: '',

  // set the foundation mum or dad ID
  // information attribute: data-root-parent-id
  rootParentId: '',

}

13. API strategies for extensions:

// delete cookie
deleteCookie(cookieName);

// get the cookies
getCookies();

// copy the chosen rows
copyColumnsToClipboard();

// toggle between the desk and the {custom} view
toggleCustomView();

// export desk with choices
exportTable(choices);

// set off the search motion
triggerSearch();

// clear the filter management
clearFilterControl();

// toggle the filter management
toggleFilterControl();

// change the language
changeLocale(native);

// drive a number of sorting
multipleSort();

// a number of sorting
multiSort(sortPriority);

// order columns
orderColumns({identify: 0, value: 1});

Changelog:

v1.21.1 (2022-09-22)

• Replace: Improved updateCell to replace one HTML cell solely.
• Replace: Up to date fr-FR locale.
• Replace: Added lacking locales for aria-label.

v1.21.0 (2022-08-20)

• New: Added sortEmptyLast choice to permit sorting empty information.
• Replace: Mounted bug on nested search with null youngster.
• Replace: Mounted element view with filter click on error.
• Replace: Mounted header doesn’t middle appropriately for the sortable column.
• Replace: Mounted regexpCompare bug when filtering columns.
• Replace: Mounted showToogle title show error.
• Replace: Mounted take away and removeByUnqiueId utilizing object param bug.
• Replace: Mounted searchHighlight bug whereas utilizing searchAccentNeutralise.
• Replace: Mounted lacking kind for customSearch choice.
• Replace: Eliminated duplicated escaping of the column worth.
• Replace: Up to date uk-UA locale.
• New(cookie): : Added hiddenColumns cookie to stop points with new added columns.
• New(editable): Added subject param to noEditFormatter choice.
• New(export): Added onExportStarted occasion.
• New(filter-control): Added accent normalization examine.
• New(filter-control): Added filterControlMultipleSearch and filterControlMultipleSearchDelimiter choices.
• Replace(custom-by): Mounted the {custom} view attributes.
• Replace(group-by): Mounted not deal with complicated objects bug.
• Replace(filter-control): Mounted choose values not clear bug after search.
• Replace(filter-control): Mounted the choose sorting error.
• Replace(filter-control): Mounted mistaken selector for caching values with a number of tables.
• Replace(filter-control): Mounted the filterDefault choice bug as filter if a number of filters exists.
• Replace(filter-control): Mounted filter management particular char.
• Replace(filter-control): Up to date default worth to false of filterStrictSearch.
• Replace(filter-control): Supported not seen columns when utilizing filterControlContainer choice.
• Replace(multiple-sort): Mounted showMultiSortButton choice bug.
• Replace(print): Mounted not deal with complicated objects bug.
• Replace(print): Eliminated switched-off columns from printed desk.

v1.20.2 (2022-05-25)

• Replace: Mounted small reminiscence leak.
• Replace: Mounted the element view bug with the td as an alternative of icon.
• Replace(export): Mounted XSS vulnerability bug by onCellHtmlData.
• Replace(export): Mounted export footer bug with out setting peak.
• Replace(filter-control): Mounted the comparability of dates when utilizing the datepicker.

v1.20.1 (2022-05-13)

• Replace: Mounted toggle column bug with complicated headers.
• Replace: Mounted icons choice can’t work bug when it is a string. 
• Replace: Up to date TypeScript definitions.
• Replace(cookie): Mounted cookie extension error with multiple-sort.
• Replace(export): Mounted the exportOptions choice can’t assist the information attribute. 
• Replace(reorder-rows): Mounted reorder-rows can’t work due to lacking default capabilities.

v1.20.0 (2022-04-25)

• New: Used bootstrap5 because the default theme.
• New: Added column-switch-all occasion of toggle all columns.
• New: Added hi-IN and lb-LU locales.
• Replace: Mounted the toolbar can’t refresh search bug.
• Replace: Mounted the cardboard view align type bug.
• Replace: Mounted {custom} search filter bug if the worth is Object.
• Replace: Mounted desk border shows bug when setting peak.
• Replace: Mounted error when the column occasions are undefined.
• Replace: Mounted escape column choice would not override desk choice bug.
• Replace: Mounted toggle all columns error when column switchable is fake.
• Replace: Mounted examine if the column is seen on card view.
• Replace: Mounted cover loading bug when canceling the request.
• Replace: Mounted default worth of clickToSelect column choice.
• Replace: Mounted onVirtualScroll not outline default technique.
• Replace: Up to date cs-CZ, ko-KR, nl-NL, nl-BE, bg-BG, fr-LU locales.
• New(filter-control): New model of filter-control with new options.
• New(reorder-rows):: Added onAllowDrop and onDragStop choices.
• Replace(cookie): Mounted sortName and sortOrder bug with cookie.
• Replace(cookie): Mounted the toggle column bug with the cookie.
• Replace(export): Mounted selector error if just one export kind is outlined.
• Replace(filter-control): Mounted new enter class form-select of bootstrap 5.
• Replace(multiple-sort): Mounted the modal can’t shut after sorting.
• Replace(print): Mounted lacking print button for bootstrap 5.
• Replace(print): Mounted printPageBuilder choice can’t outline in html attribute.
• Replace(toolbar): Mounted toolbar extension modal bug with bootstrap 5.

v1.19.1 (2021-11-13)

• Replace: Mounted the CVE safety downside.
• Replace: Mounted can’t seek for particular characters when utilizing searchHighlight.
• Replace(auto-refresh): Up to date the showAutoRefresh choice as default.
• Replace(export): Mounted export with just one export kind bug.
• Replace(filter-control): Mounted filter-control can’t work bug.
• Replace(filter-control): Forestall duplicated parts for filter-control.

v1.19.0 (2021-11-08)

• New: Added onlyCurrentPage param for checkBy/uncheckBy strategies.
• New: Used bootstrap icons as default icons for bootstrap v5.
• New: Added regexSearch choice which permits to filter the desk utilizing regex.
• New: Added assist for enable importing stylesheets.
• New: Added toggle-pagination occasion.
• New: Added virtual-scroll occasion.
• Replace: Mounted vue element can’t work.
• Replace: Mounted infinite loop error with mistaken server-side pagination metadata.
• Replace: Improved the conduct of ajax abort.
• Replace: Mounted click on bug when paginationLoop is fake.
• Replace: Mounted the highlighting bug when utilizing radio/checkboxes.
• Replace: Mounted width bug brought on by loading css.
• Replace: Eliminated the input-group-append class for bootstrap v5.
• Replace: Mounted duplicate definition id bug.
• Replace: Mounted the comparability of search inputs.
• Replace: Mounted damaged page-list selector.
• Replace: Mounted overwrite {custom} locale operate bug.
• Replace: Mounted bug with server aspect pagination and the web page dimension all.
• Replace: Mounted all checkbox not auto examine after pagination modified.
• Replace: Up to date the es-MX find.
• New(cookie): Added A number of Type order saved in cookie extension.
• New(cookie): Added Card view state saved in cookie extension.
• New(copy): Added ignoreCopy column choice to stop copying the column information.
• New(copy): Added rawCopy column choice to repeat the uncooked worth as an alternative of the formatted worth.
• Replace(cookie): Mounted switchable column bug with the cookie extension.
• Replace(export): Mounted the export dropdown can’t be closed bug.
• Replace(filter-control): Up to date filterMultipleSelectOptions to filterControlMultipleSelectOptions choice.
• Replace(filter-control): Mounted bug with cookie deletion of none filter cookies.
• Replace(filter-control): Mounted bug when utilizing the load technique.
• Replace(group-by): Mounted overwriting the column courses bug on group collapsed rows.
• Replace(multiple-sort): Mounted cover/present column error with no sortPriority outlined.
• Replace(page-jump-to): Mounted jump-to show bug in bootstrap v3.
• Replace(print): Mounted print formatter bug.
• Replace(reorder-rows): Mounted reorder-rows not work property.
• Replace(reorder-rows): Mounted the drag selector to stop a checkbox bug on cell.
• Replace(resizable): Mounted the reinitialization after the desk modified.
• Replace(sticky-header): Mounted sticky-header not work property with group header.
• Replace(treegrid): Mounted bug of treegrid from html.

v1.18.3 (2021-03-29)

• Replace: Mounted adverse quantity bug when looking with comparability.
• Replace: Mounted non-conform HTML-Commonplace issues.
• Replace: Mounted td width bug utilizing card view.
• Replace: Mounted actual match downside when looking time period with accent.
• Replace: Replace pt-PT and fa-IR locales.
• New(page-jump-to): Added showJumpToByPages choice.
• Replace(auth-refresh): Mounted auto refresh not clear interval bug.
• Replace(multiple-sort): Mounted multiple-sort can’t assist iconSize bug.
• Replace(sticky-header): Mounted stickyHeaderOffsetY choice can’t work.
• Replace(sticky-header): Up to date the stickyHeader offset choices to quantity.

v1.18.2 (2021-01-24)

• Replace: Mounted bootstrap5 can’t work bug.
• Replace: Mounted checkbox show bug when utilizing formatter.
• Replace: Mounted search spotlight bug.
• Replace: Up to date ru-RU and de-DE locales.
• New(filter-control): Added assist for flat JSON.
• Replace(cookie): Mounted not deleted cookie bug when the type was reset.
• Replace(export): Not export the element view icon column.
• Replace(filter-control): Mounted not working when utilizing filterControlContainer.
• Replace(multiple-sort): Mounted multiple-sort can’t work bug.
• Replace(resizable): Mounted resizable can’t work in modal.

v1.18.1 (2020-12-06)

• New(locale): Added quick locales primarily based on ISO Language.
• Replace: Up to date sk-SK, fr-FR, de-DE, and es-* locales.
• Replace: Mounted toggleCheck, getSelections and take away bug.
• Replace: Mounted buttons choice bug utilizing in information attribute.
• Replace: Mounted {custom} icons choice bug.
• Replace: Mounted cellStyle column choice not work in card view.
• Replace: Mounted getSelection bug when utilizing search.
• Replace: Mounted pageList choice with all show bug utilizing smartDisplay.
• Replace: Mounted search spotlight can’t work bug when information subject is quantity.
• Replace: Mounted updateColumnTitle is undo bug after pagination.
• Replace: Mounted multipleSelectRow choice bug.
• Replace: Mounted icon-size choice bug with pagination.

This superior jQuery plugin is developed by wenzhixin. For extra Superior Usages, please examine the demo web page or go to the official web site.