Bootstrap-based lightweight table plug-in Bootstrap Table can have powerful functions such as fixed table headers, single/checking, sorting, paging, searching and custom table headers, which can better improve development efficiency and reduce development time.
1. Plug-in description: Bootstrap Table displays data table format, providing rich support, radio boxes, check boxes, sorting, paging, etc., plug-in download.
2. Features:
Developed based on Bootstrap 3 (bootstrap 2 is also supported)
Responsive interface
Fixed header
Fully configurable
Support data attributes
Show/Hide Columns
Show/hide the table header
Get JSON data using AJAX
Click the table header to sort it simply
Supports custom column display
Support single/reselect
Powerful paging function
Support business card layout
Supports multilingual
3. How to use:
1) Introduce the Bootstrap library (if your project is not used yet) and bootstrap-table.css in the head tag of the html page.
<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css">
2) Introduce jQuery library, Bootstrap library (if your project is not used yet) and bootstrap-table.js before the head tag or body tag is closed (recommended).
<script src="jquery.min.js"></script><script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script>
3) Specify the data source, here are two ways
Method 1: Pass the data attribute tag
Setting data-toggle="table" in a normal table enables Bootstrap Table without writing JavaScript.
<table data-toggle="table" data-url="data.json"> <tead> ... </tead> </table>
Method 2: Set up the data source through JavaScript
Enable Table with id attribute via JavaScript.
$('#table').bootstrapTable({ url: 'data.json' });:4. Bug description:
When setting the field formatter using the tag attribute method, I found that there was no effect and the picture was unclear. You can directly download the example for research and download the address.
For example: <th data-field="sex" data-formatter="format_sex">Gender</th>
1) Reason:
Bootstrap-table.js line 399, only the formatter typeof is function in the code.
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); } }If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is the usage method of Bootstrap Table shared with you. I hope it will be helpful for you to master the usage method of Bootstrap Table.