Record Bootstrap table study notes for the first time (1)

The first time I used the Bootstrap-table table plug-in to record the problems encountered during use.

|Introduce CSS files

<link rel="stylesheet" href="">
<link rel="stylesheet" href="">

|Introduce related libraries

We need to introduce Jquery library, bootstrap library, and files

<script src=""></script>
<script src=""></script>
<script src=""></script>
<-- put your locale files after  -->
<script src=""></script>

|Enable the Bootstrap Table plugin:

The official documentation shows that we have two ways to enable the bootstrap-table plugin:

1. Through data attributes:

<table data-toggle="table">
 <thead>
 <tr>
  <th>Item ID</th>
  <th>Item Name</th>
  <th>Item Price</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>1</td>
  <td>Item 1</td>
  <td>$1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Item 2</td>
  <td>$2</td>
 </tr>
 </tbody>
</table>

2. Through js:

//Just just write down the table tag in HTML and set the id&lt;table &gt;&lt;/table&gt;

$('#table').bootstrapTable({
 columns: [{
 field: 'id',
 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});

You can also get data through url

$('#table').bootstrapTable({
 url: '',
 columns: [{
 field: 'id',// Correspond to the key value of the JSON data of the return value title: 'Item ID'//Column name }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }, ]
});

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.