Bootstrap table, bootstraptable

Bootstrap table, bootstraptable

Bootstrap Table is a lightweight Table plug-in based on Bootstrap. It supports fixed headers, single check, sorting, paging, search, and custom headers with simple configuration.

1. Required databases:

Bootstrap.min.css

Bootstrap-table.css

Jquery. min. js

Bootstrap. min. js

Bootstrap-table.js

2. Bootstrap Table:

Bootstrap Table displays Table data through data attribute labels or JavaScript:

(1) data attribute label

Set data-toggle = "table" in the Table. You can enable Bootstrap table without writing JavaScript.

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

(2) transfer data to the table through ccipt:

<Table id = "table"> </table> <1>. simple static data $ ('# table '). bootstrapTable ({columns: [{field: 'id', title: 'item id'}, {field: 'username', title: 'item username'}, {field: 'Password', title: 'item Passowrd '}], data: [{id: 1, username: 'item 1', passowrd:' $ 1'}, {id: 2, username: 'item 2', password: '$ 2'}]}); <2>. Get data through url $ (' # table '). bootstrapTable ({url: 'data1. json', columns: [{field: 'id', title: 'item id'}, {field: 'username', title: 'item username'}, {field: 'passowrd ', title: 'item passowrd'},]});

3. simple Bootstrap Table demo:

<! Doctype html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

If you want to learn more, click here to learn more. Then, we will attach two wonderful topics: Bootstrap learning tutorial Bootstrap practical tutorial.