bootstrap table组件实现简单扁平化表格

1.引入css、js文件

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<!--bootstrap-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--bootstrap-table-->
<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<!--bootstrap-table-lanuage-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.14.2/locale/bootstrap-table-zh-CN.js"></script>

2.定义一个table，id为data-table，最好用一个div包裹

<div class="col-sm-6">
 <table id="data-table"></table>
</div>

3.用js初始化这个table

$('#data-table').bootstrapTable({
    columns: [{
        field: 'id',
        title: 'ID'
    }, {
        field: 'name',
        title: '名称'
    }, {
        field: 'price',
        title: '价格'
    }],
    data: [{ //数据
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    },{
     id:3,
     name : 'item3',
     price : '3'
    }],
  //是否显示行间隔色
    striped: true,
  //是否显示分页
    pagination: true,
  //每页的记录行数
    pageSize: 1,
    //初始化加载第1页，默认第1页
    pageNumber: 1,
    //可供选择的每页的行数
    pageList: "[10, 20, 50, 80, 100]",
    paginationFirstText: "首页",
    paginationPreText: "上一页",
    paginationNextText: "下一页",
    paginationLastText: "末页",
    pagination:true});

测试效果

官方文档：www.itxst.com/Bootstrap-Table/down.html
https://www.bootstrap-table.com.cn/doc/api/table-options/#footerstyle
https://www.bootcdn.cn/