關於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表格的數據；