Bootstrap table case

Bootstrap Table is a lightweight table plug-in based on Bootstrap. It only requires simple configuration to achieve powerful functions such as fixed table headers, single checking, sorting, paging, searching, and custom table headers.

1. Required library:

2. How to get data from Bootstrap Table:

Bootstrap Table displays table data through data attribute tags or JavaScript:

(1) Through the data attribute tag

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

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

(2) Pass data to the table through JavaScript:

&lt;table &gt;&lt;/table&gt;
      &lt;1&gt;、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'
          }]});
           &lt;2&gt;、passurlGet data

        $('#table').bootstrapTable({        
          url: '',
          columns: [{
            field: 'id',
            title: 'Item ID'
          }, {
            field: 'username',
            title: 'Item Username'
          }, {
            field: 'passowrd',
            title: 'Item Passowrd'
          }, ]});

3. Bootstrap Table simple demo:

&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  
    &lt;meta charset="utf-8"&gt;
    
    &lt;title&gt;Bootstrap Tableofdemo&lt;/title&gt;
    
    &lt;link rel="stylesheet" href=""&gt;
    
    &lt;link rel="stylesheet" href=""&gt;
  
  &lt;/head&gt;
  
&lt;body&gt;
 &lt;table &gt;&lt;/table&gt;
&lt;!--引入相关ofjsdocument--&gt;
 &lt;script src=""&gt;&lt;/script&gt;
 &lt;script src=""&gt;&lt;/script&gt;
 &lt;script src=""&gt;&lt;/script&gt;
  
 &lt;!--CustomizejavaScript--&gt;
 &lt;script&gt;
   $('#table').bootstrapTable({
    columns: [{
      field: 'id',
      title: 'Item ID'
      }, {
      field: 'username',
      title: 'Item Username'
      }, {
      field: 'passsword',
      title: 'Item Password'
    }],
    data: [{
      id: 1,
      username: 'Item 1',
      passowrd: '123'
      }, {
      id: 2,
      username: 'Item 2',
      passowrd: '123
      }]
   });
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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.

If you want to learn more, you can clickhereLet’s study and attach two exciting topics to you:Bootstrap learning tutorial Bootstrap practical tutorial