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.

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.

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.

    ...
   

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: 6b44373a45362b3bb0e269a277460e67gender01c3ce868d2b3d9bce8da5c1b7e41e5b
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!