Bootstrap Table根據參數搜索功能

在使用jQuery開發的時候，經常會用到Bootstrap Table來實現需要用到的一些表格。

bootstrap-table 被設計來減少開發時間,開發人員不需要特定的知識就可以做出很美妙的table。非常輕量級的和功能豐富的。滿足企業開發需求。

官網：https://www.bootstrap-table.com.cn/
GitHub地址:https://github.com/wenzhixin/bootstrap-table

demo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
    </head>
    <style>
    </style>
    <body>
        <div class="mytab">
            <table id="mytab" class="table table-hover"></table>
        </div>
        <script>
            $('#mytab').bootstrapTable({
                method: 'get',
                url: "test.json", // 請求路徑
                striped: true, // 是否顯示行間隔色
                pageNumber: 1, // 初始化加載第一頁
                pagination: true, // 是否分頁
                sidePagination: 'client', // server:服務器端分頁|client：前端分頁
                pageSize: 5, // 單頁記錄數
                pageList: [5, 20, 30],
                // showRefresh : true,// 刷新按鈕
                queryParams: function(params) { // 上傳服務器的參數
                    var temp = {};
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: '廠區ID',
                    field: 'placeId',
                }, {
                    title: 'MAC地址',
                    field: 'mac',
                }, {
                    title: '名稱',
                    field: 'name',
                }, {
                    title: '類型',
                    field: 'mode',
                    formatter: formatMode
                }, {
                    title: '平均場強',
                    field: 'avgLevel',
                }, {
                    title: '通道號',
                    field: 'channel',
                }, {
                    title: '樓層號',
                    field: 'floorId',
                }, {
                    title: '建築ID',
                    field: 'buildingId',
                }, {
                    title: '經度',
                    field: 'lon',
                }, {
                    title: '緯度',
                    field: 'lat',
                }]
            })
            // 格式化按鈕
            function formatMode(value, row, index) {
                if (value == 0)
                    return "wifi";
                return "藍牙";
            }
        </script>
    </body>
</html>

test.json

{
    "rows": [{
        "lat": 30.48719161966308,
        "lon": 114.53451241344243,
        "mac": "0c:c6:cc:e9:80:41",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.487192545033068,
        "lon": 114.5346268683459,
        "mac": "0c:c6:cc:e9:82:61",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.4873227138991,
        "lon": 114.5346274620685,
        "mac": "0c:c6:cc:e9:83:61",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.48719262258305,
        "lon": 114.5347355859475,
        "mac": "0c:c6:cc:e9:84:21",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.48732913761642,
        "lon": 114.5347382328521,
        "mac": "0c:c6:cc:e9:8a:a1",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 31.874989841024682,
        "lon": 117.22911732423667,
        "mac": "0c:ef:af:00:09:c7",
        "name": "S2-C709",
        "mode": 0,
        "avgLevel": -40,
        "channel": 8,
        "floorId": 1,
        "placeId": "51",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }],
    "total": 1731
}

是這個樣子的

現在要實現一個功能，根據輸入input的參數來查詢表格的數據集
先在html裏面加一個搜索框的標籤

<div style="margin: 20px;">
            <input type="text" id="mac" class="form-control" style="width: 20%; float: left" placeholder="mac">
            <input type="text" id="floorId" class="form-control" style="width: 20%; float: left" placeholder="搜索樓層ID">
            <input type="text" id="placeId" class="form-control" style="width: 20%; float: left" placeholder="廠區ID">
            <input type="text" id="buildingId" class="form-control" style="width: 20%; float: left" placeholder="建築物ID">
            <span id="search"><button class="btn btn-default" type="button">搜索</button></span>
        </div>

然後寫一下js的代碼，在queryParams裏面添加要搜索的參數，根據實際情況確定需不需帶limit（每頁顯示數量）和offset

var temp = {
                        mac: $("#mac").val(),
                        floorId: $("#floorId").val(),
                        placeId: $("#placeId").val(),
                        buildingId: $("#buildingId").val(),
                        limit: params.limit, // 每頁顯示數量
                        offset: params.offset, // SQL語句起始索引
                    };

最後寫搜索按鈕的點擊事件，每次點擊的時候需要拼接所選擇的參數發起一次請求

// 查詢按鈕事件
            $('#search').click(function() {
                $('#mytab').bootstrapTable('refresh', {
                    url: "test.json"
                });
            })

參考代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
    </head>
    <style>
        .mytab{
            margin:20px;            
        }
    </style>
    <body>
        <div style="margin: 20px;">
            <input type="text" id="mac" class="form-control" style="width: 20%; float: left" placeholder="mac">
            <input type="text" id="floorId" class="form-control" style="width: 20%; float: left" placeholder="搜索樓層ID">
            <input type="text" id="placeId" class="form-control" style="width: 20%; float: left" placeholder="廠區ID">
            <input type="text" id="buildingId" class="form-control" style="width: 20%; float: left" placeholder="建築物ID">
            <span id="search"><button class="btn btn-default" type="button">搜索</button></span>
        </div>
        <div class="mytab">
            <table id="mytab" class="table table-hover"></table>
        </div>
        <script>
            $('#mytab').bootstrapTable({
                method: 'get',
                url: "test.json", // 請求路徑
                striped: true, // 是否顯示行間隔色
                pageNumber: 1, // 初始化加載第一頁
                pagination: true, // 是否分頁
                sidePagination: 'client', // server:服務器端分頁|client：前端分頁
                pageSize: 5, // 單頁記錄數
                pageList: [5, 20, 30],
                // showRefresh : true,// 刷新按鈕
                queryParams: function(params) { // 上傳服務器的參數
                    var temp = {
                        mac: $("#mac").val(),
                        floorId: $("#floorId").val(),
                        placeId: $("#placeId").val(),
                        buildingId: $("#buildingId").val(),
                        limit: params.limit, // 每頁顯示數量
                        offset: params.offset, // SQL語句起始索引
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: '廠區ID',
                    field: 'placeId',
                }, {
                    title: 'MAC地址',
                    field: 'mac',
                }, {
                    title: '名稱',
                    field: 'name',
                }, {
                    title: '類型',
                    field: 'mode',
                    formatter: formatMode
                }, {
                    title: '平均場強',
                    field: 'avgLevel',
                }, {
                    title: '通道號',
                    field: 'channel',
                }, {
                    title: '樓層號',
                    field: 'floorId',
                }, {
                    title: '建築ID',
                    field: 'buildingId',
                }, {
                    title: '經度',
                    field: 'lon',
                }, {
                    title: '緯度',
                    field: 'lat',
                }]
            })

            // 查詢按鈕事件
            $('#search').click(function() {
                $('#mytab').bootstrapTable('refresh', {
                    url: "test.json"
                });
            })
            // 格式化按鈕
            function formatMode(value, row, index) {
                if (value == 0)
                    return "wifi";
                return "藍牙";
            }
        </script>
    </body>
</html>

測試一下
在input框輸入數據，並且點擊按鈕發起一次請求可以發現，將輸入框的數據一起帶入拼接參數，傳給後端了。
ok~~

Bootstrap Table根據參數搜索功能

es6擴展運算符、concat方法合併多個數組

js獲取當前的年月日時分秒

Vue3.0中如何引入jQuery並使用

Vue3.0商店後臺管理系統項目實戰-登錄界面-vuex

Vue3.0商店後臺管理系統項目實戰-路由守衛（登錄狀態儲存）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結