Using bootstrap table
The first point: bootstrap tab is easy to use, and it is front-end paging (that is, there is no need to read the background database to assist paging)
Once you download bootstrap, you will not have the bootstrap table plug-in, but you also have to download the bootstrap table plug-in;
bootstrap download address: http://www.bootcss.com/
The bootstrap table plug-in download address (the following 3 are related) is best downloaded from Github
Official website address: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Github address: https://github.com/wenzhixin/bootstrap-table
Chinese documentation: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
First go to github to download the latest version. After downloading, unzip it as follows:
2.2. Introduce plug-ins into the page
Copy the files in the dist directory to the project:
You must also introduce Bootstrap styles, JS, and Jquery files. The complete introduction is as follows:
Second: How to use:
1. Just write an empty table shell
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲tableL01').boot… ('#tableL01').bootstrapTable({ //Your data is written here});
4. Before starting this form, be sure to clear the previous form first. The method is:
$('#tableL01').bootstrapTable('destroy'); //Before dynamically loading the table, destroy the table first. The
above two points 3 and 4 are combined to execute 4 first, and then 3.
5. Prepare the header data:
var tableColumns = [
{field: 'name', title: 'name', sortable: true},
{field: 'number', title: 'number', sortable: true},
];
6. Prepare table content data:
var mydata=[
{name: "aaaa", number: 1111},
{name: "bbbb", number: 2222},
];
Note that the name and number of the table content correspond to the field name in point 5 , otherwise, your table will not display the content. This is a trap.
7. The complete $('#tableL01').bootstrapTable({}) should be written like this:
$('#tableL01').bootstrapTable({//Table initialization
columns: tableColumns, //Header
data:mydata, //The data in the table, this is the data obtained locally, if the data is obtained from the background, it should Change to background address
});
8. To achieve the purpose of front-end paging, the following parameters must be added:
$('#tableL01').bootstrapTable({//Table initialization
columns: tableColumns, //Header
data:mydata, //Data returned through ajax
width:300,
height:268,
method: 'get',
pageSize: 3, //3 items per page pageNumber: 1, // pageList
on page 1 : [10,25], //Adjust the number of items per page according to the situation during use. Although you currently define 3 items per page , You can adjust it to 10 or 25 at any time. cache: false, //Do not cache striped: true, pagination: true, sidePagination: 'client', search: false, showRefresh: false, showExport: false, showFooter: true, / / exportTypes: ['csv', 'txt', 'xml'], clickToSelect: true, });
Reprinted from: Tingbo (deleted if infringement occurs)
Source: CSDN
Original text: https://blog.csdn.net/jintingbo/article/details/82924330