bootstrapTable插件的引入及簡單使用

bootstrap的組件過少，新項目中引入github上星數較多的bootstrapTable插件。

一.演示

先看看簡單的效果

組件已經比較完備，大部分正常功能都有了（分頁，搜索，排序，篩選等），樣式略醜不過影響不大。

 

二.代碼

1.html部分

<table id="table"></table>

2.js部分

window.onload = () => {
    //先生成20個重複數據作爲實際數據來使用
    let data = new Array(20).fill({
        id: 1,
        name: "Item 1",
        price: "$1"
    });

    $("#table").bootstrapTable({
        pagination: true, //獲得分頁功能
        pageSize: 15, //默認分頁數量
        pageList: [5, 10, 15, 20], //分頁數量選項
        search: true, //獲得一個搜索框
        striped: true, //開啓斑馬線
        showColumns: true, //獲得一個能選擇顯示某些列的按鈕
        showRefresh: true, //獲得一個刷新數據按鈕
        columns: [{
                field: "id",
                title: "Item ID"
            },
            {
                field: "name",
                title: "Item Name"
            },
            {
                field: "price",
                title: "Item Price"
            }
        ],
        data: data
    });
};

 

三.需要的js與css

1.先把我整理完下好的貼出來，大家可以自己去下載（私聊也行）

    <!-- bootstrap的css -->
    <link rel="stylesheet" href="helper/bootstrap/bootstrap.min.css">
    <!-- bootstrap-table的css -->
    <link rel="stylesheet" href="helper/bootstrap_table/bootstrap-table.min.css">
    <!-- 一個純css美化框架，可不要 -->
    <link rel="stylesheet" href="helper/purecss/pure-min.css">
    <!-- bootstrap基於jq -->
    <script src="helper/bootstrap/jquery-3.4.1.js"></script>
    <!-- bootstrap的js -->
    <script src="helper/bootstrap/bootstrap.min.js"></script>
    <!-- bootstrap-table的js -->
    <script src="helper/bootstrap_table/bootstrap-table.min.js"></script>
    <!-- bootstrap-table漢化包的js -->
    <script src="helper/bootstrap_table/bootstrap-table-cn.js"></script>

這裏有一點需要注意，它的部分圖標還是依賴於bootstrap，所以我們項目裏需要把bootstrap的font文件夾放在bootstrap.min.css的上一級。

 

2.這是可以直接使用的鏈接，如果只是想測試，直接引入這一堆就可以了

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

 

四.常用屬性

$("#table").bootstrapTable({
        pagination: true, //獲得分頁功能
        pageSize: 10, //默認分頁數量
        pageList: [5, 10, 15, 20], //分頁數量選項

        search: true, //獲得一個搜索框
        searchOnEnterKey: true, //按下回車才進行搜索（false的時候是即時搜索）

        showColumns: true, //獲得一個能選擇顯示某些列的按鈕
        showRefresh: true, //獲得一個刷新數據按鈕
        showToggle: true, //獲得一個切換爲卡片式表格的按鈕

        toolbar: "#toolbar", //工具欄

        columns: [
            //開啓複選框列
            {
                checkbox: "true"
            },
            {
                field: "id", //字段
                title: "Item ID", //表頭名
                sortable: "false", //開啓排序按鈕
                order: "asc", //排序方式
                align: "center", //表內容居中
                halign: "center", //表頭居中
                width: 50,
                visible: "true" //是否可視，默認就爲true
            },
            {
                field: "name",
                title: "Item Name"
            },
            {
                field: "price",
                title: "Item Price"
            }
        ],
        data: data
    });

五.相關文檔鏈接

官方文檔：https://bootstrap-table.com/

中文文檔：https://blog.csdn.net/yapengliu/article/details/80191699