Master Bootstrap Table: Quick Setup, AJAX Options, Events & Methods

1. Initializing Bootstrap Table with Local Data

Bootstrap Table is a jQuery plugin that enriches standard HTML tables. For simple local data, include the CSS and JS files, define the table markup, and call bootstrapTable with options such as height, striped, dataType, pagination and sidePagination.

<link href="bootstrap-table.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap-table.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="a">A</th>
      <th data-field="b">B</th>
      <th data-field="c">C</th>
    </tr>
  </thead>
</table>

<script>
$('#table').bootstrapTable({
  height: 500,
  striped: true,
  dataType: 'json',
  pagination: false,
  sidePagination: 'client'
});
</script>

2. Loading Data from Server (AJAX)

When the table should fetch data from a server, configure AJAX‑related options: method, url, queryParamsType, pageSize, pageNumber, queryParams, and responseHandler. These settings let the plugin send REST‑ful parameters and process the returned JSON.

$('#table').bootstrapTable({
  method: 'POST',
  url: '${ctx.host}/logisticsbase/list.do',
  queryParamsType: 'limit',
  pageSize: 10,
  pageNumber: 1,
  queryParams: parameterFunction,
  responseHandler: responseHandler,
  sidePagination: 'server',
  height: 500,
  striped: true,
  dataType: 'json',
  pagination: true
});

3. Custom AJAX Parameters and Response Handling

Define a queryParams function to customize the request payload and a responseHandler to reshape the server response into the { rows, total } format expected by Bootstrap Table.

function parameterFunction(params) {
  return {
    limit: params.limit,
    start: params.offset,
    id: id,
    a: a,
    b: b,
    c: c
  };
}

function responseHandler(res) {
  return {
    rows: res.resultStr.rows,
    total: res.resultStr.total
  };
}

4. Common Events

Bootstrap Table emits many events; the most frequently used include row click, double‑click, check, and uncheck. Attach handlers with jQuery's on method.

$('#table').on('click-row.bs.table', function (e, row, $element, field) {
  // row clicked
});

$('#table').on('dbl-click-row.bs.table', function (e, row, $element, field) {
  // row double‑clicked
});

$('#table').on('check.bs.table', function (e, row) {
  // row checked
});

$('#table').on('uncheck.bs.table', function (e, row) {
  // row unchecked
});

5. Frequently Used Methods

Bootstrap Table provides over 50 methods; the most useful are listed below with example calls. getSelections: returns an array of selected rows.

var selected = $('#table').bootstrapTable('getSelections');

getData

: retrieves the current dataset.

var data = $('#table').bootstrapTable('getData');

load

: replaces the table data.

$('#table').bootstrapTable('load', newData);

append

: adds rows after existing data.

$('#table').bootstrapTable('append', moreData);

prepend

: adds rows before existing data.

$('#table').bootstrapTable('prepend', moreData);

removeByUniqueId

: deletes a row identified by a unique field (set via the uniqueId option during initialization).

$('#table').bootstrapTable('removeByUniqueId', id);