使用Bootstrap表格

首先引入库

<!-- Bootstrap core CSS -->.
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

顺序不能搞错，官网的例子引入不全，总是问题，自己记录下

body标签里写

     <!-- 表格显示-->
    <table id="table">
  <thead>
    <tr>
      <th data-field="id">id</th>
      <th data-field="name">名字</th>
      <th data-field="price">价格</th>
    </tr>
  </thead>
</table>
<Script>
//我这里的data是list形式，list里面是字典var data = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': '$0'
      },
      {
        'id': 1,
        'name': 'Item 1',
        'price': '$1'
      },
      {
        'id': 2,
        'name': 'Item 2',
        'price': '$2'
      },
      {
        'id': 3,
        'name': 'Item 3',
        'price': '$3'
      },
      {
        'id': 4,
        'name': 'Item 4',
        'price': '$4'
      },
      {
        'id': 5,
        'name': 'Item 5',
        'price': '$5'
      }
    ]
 var $table = $('#table');
 $table.bootstrapTable({data: data});
</Script>

此外bootstrapTable的数据源还可以制定为其他形式，如URL，json等等
详见table例子官网

这里与本篇文章无关

喜欢二次元动漫的小伙伴可以微信扫一扫关注一下哟，点赞关注，鼓励一下博主呦