Worth sharing lightweight bootstrap table table plugin _javascript Tips

Lightweight table plugin based on bootstrap bootstrap table with a simple configuration, you can have a strong support for fixed headers, single/check, sorting, paging, search and custom table first function, better improve development efficiency and reduce development time.

1, plug-in description: Bootstrap table shows the format of the data table, provides a wealth of support, Radio box, check box, sorting, paging, etc., plug-in download.

2, Features:

Based on Bootstrap 3 development (while supporting Bootstrap 2)

Responsive interface

Fixed table header

Fully configurable

Support for data properties

Show/Hide Columns

Show/Hide Table headers

Using AJAX to get JSON data

Click on the table header to simply sort

Supports custom column display

Support Single/Check

Strong paging capabilities

Support Card Layout

Support for multiple languages

3, the use of methods:

1, the head tag in the HTML page to introduce the bootstrap library (if your project has not been used) and bootstrap-table.css.

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

2, in the head tag or before the body tag closed (more recommended) to introduce jquery library and bootstrap library (if your project has not been used) 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, here are two ways
Mode 1: through the Data property tag
Set data-toggle= "Table" in a normal table to enable bootstrap table without writing JavaScript.

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

Mode 2: set up the data source through JavaScript
Use JavaScript to enable a table with an id attribute.

$ (' #table '). bootstraptable ({
   URL: ' Data.json ' 
  });:

4, the bug description:

The Label property way to set the field formatter, found no effect, the picture is not clear, you can download the example directly to study, download the address.
such as: <th data-field= "Sex" data-formatter= "format_sex" > Sex </th>
1), Reasons:
bootstrap-table.js Line No. 399, the code only judges formatter typeof as a function
2), the solution:
to modify the No. 399 line of code block:
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 want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is for everyone to share the use of bootstrap table, I hope to master the use of bootstrap table is helpful.