A lightweight Bootstrap Table plug-in worth sharing

Bootstrap Table is a lightweight table plug-in based on Bootstrap. With simple configuration, it can have powerful functions such as supporting fixed headers, single/multiple selection, sorting, paging, search and custom headers, etc., to better improve Development efficiency and reduced development time.

1. Plug-in description: Bootstrap Table displays data table format, providing rich support, radio buttons, check boxes, sorting, paging, etc.

2. Features:

Developed based on Bootstrap 3 (also supports Bootstrap 2)

Responsive interface

Fixed header

Completely available Configuration

Support data attribute

Show/hide columns

Show/hide header

Use AJAX to obtain JSON data

Click on the table Headers can be sorted simply

Support custom column display

Support single/check selection

Powerful paging function

Support business card layout

Support multiple languages

3. How to use:

1). Introduce the Bootstrap library (if your project has not yet used it) and bootstrap-table in the head tag of the html page. css.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

2), introduce jQuery library and Bootstrap library (if your project has not used it yet) in the head tag or before the body tag is closed (more recommended) and bootstrap-table.js.

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

3), specify the data source, there are two ways
Method 1: Through the data attribute label
In an ordinary table Setting data-toggle="table" enables Bootstrap Table without writing JavaScript.

<table data-toggle="table" data-url="data.json">
   <thead>
    ...
   </thead>
  </table>

Method 2: Set the data source through JavaScript
Enable the Table with the id attribute through JavaScript.

$('#table').bootstrapTable({
   url: 'data.json'
  });:

4. Bug description:

When setting the field formatter using the label attribute method, it was found that there is no Effect

For example: gender
1), reason:
bootstrap-table.js Line 399, the code only determines the case where formatter typeof is function
2), solution:
Modify the code block on line 399:
Before modification

if (typeof that.header.formatters[j] === 'function') {
 value = that.header.formatters[j](value, item);
}

After modification:

if (typeof that.header.formatters[j] === 'function') {
     value = that.header.formatters[j](value, item);
    }else if(typeof that.header.formatters[j] === 'string') {
     if(typeof window[that.header.formatters[j]] === 'function') {
     value = window[that.header.formatters[j]](value, item);
     }
    }

The above is the method of using Bootstrap Table shared with everyone. I hope everyone can master the method of using Bootstrap Table. Helps.

For more articles related to the lightweight Bootstrap Table plug-in worth sharing, please pay attention to the PHP Chinese website!