Bootstrap table tutorial -- getting started with basic usage, bootstraptable

Bootstrap table tutorial -- getting started with basic usage, bootstraptable

I read a lot of articles when querying the bootstrap table data and found that many articles have written examples on how to use bootstrap table. Of course, the best example is the official website. However, for some technical personnel, the entry is not detailed enough, so the following articles are available. I hope my article will help you.

As a common table display control, bootstrap-TABLE is often used in projects.

 

The procedure is as follows:

Step 1: download the files needed for bootstrap-table (including Css and js files)

Official Website http://bootstrap-table.wenzhixin.net.cn/

 

After downloading and decompressing the package, you can see the following directory format:

bootstrap-table/├── dist/│   ├── extensions/│   ├── locale/│   ├── bootstrap-table.min.css│   └── bootstrap-table.min.js├── docs/└── src/    ├── extensions/    ├── locale/    ├── bootstrap-table.css    └── bootstrap-table.js

 

Step 2: Add the following CSS and JS labels to the html page or other pages

Note: The CSS and JS files can be found in the download folder.

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

　　

<script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="bootstrap-table.js"></script><script src="bootstrap-table-zh-CN.js"></script>

The best practice is to define the position of CSS and JS. For example, you can create a bootstrap-table folder under your root directory and separate the css and js folders, copy the file to the corresponding directory

 

 

Step 3: add the table label

<table id="table"></table>

Step 4 Write js Code

<script >$('#table').bootstrapTable({    url: 'data1.json',    columns: [{        field: 'id',        title: 'Item ID'    }, {        field: 'name',        title: 'Item Name'    }, {        field: 'price',        title: 'Item Price'    }, ]});</script>

Step 5 write data to source files

This example uses a json file to implement data sources. In fact, you can use other programming languages, such as php jsp, to implement json output.

The content of the data1.json file is as follows:

[{id:"1",title:"meetweb"},{id:"2",title:"learn bootstrap table"}]

　　

 

Author: "meetweb" Source: meetweb.