关于bootstrap-table的常见用法

1.官方网站：

    https://bootstrap-table.com/

2.需要引入的文件

        CSS部分： 

        <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">

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

        JS部分：

        <script src="/jquery/dist/jquery.min.js"></script>

        <script src="/bootstrap/dist/js/bootstrap.min.js"></script>

        <script src="/bootstrap-table/dist/bootstrap-table.js"></script>                       

        <script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

3. 使用

两种方式： 

   1> 在渲染页面的时候，将数据动态填入table元素

    2>只在页面上声明一个table元素，如： <table id="table"></table>；然后根据js代码动态加态数据

一般都为页面加载的速度，都选择第二种方式进行数据的异步加载。

    具体的使用方式：

     

$('#table').bootstrapTable({
    url: '/bootstrap-table/data',        // 表格数据来源
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    },{
        field: 'column1',
        title: '列1'
    },{
        field: 'column2',
        title: '列2' 
    },{
        field: 'column3',
        title: '列3'
    },{
        field: 'column4',
        title: '列4'
    } ]
});

加载后的图例：

4.如何灵活使用bootstrap-table的参数：

常用配置参数，可分为四类：

表参数| 列参数|事情参数|方法参数

灵活使用前端的参数，可实现前端数据在无http请求的前提下，表格数据的筛选|导出表格数据|表格编辑|表格删除等功能；可参考官方指导

5.如何实现根据条件动态的请求后端数据，重新加载数据

最重要的方法: $(‘#bootstrapTableId’).('refresh');  会重新请求js代码中配置的Url； 在重新请求Url时，会将搜索条件的参数传入；在获取http请求重新返回的数据后，会重新刷新前端的table表格的数据；