Bootstrap Table根据参数搜索功能

柔情只为你懂 2022-12-27 12:53 199阅读 0赞

在使用jQuery开发的时候，经常会用到Bootstrap Table来实现需要用到的一些表格。

bootstrap-table 被设计来减少开发时间,开发人员不需要特定的知识就可以做出很美妙的table。非常轻量级的和功能丰富的。满足企业开发需求。

官网：[https://www.bootstrap-table.com.cn/][https_www.bootstrap-table.com.cn]  
GitHub地址:[https://github.com/wenzhixin/bootstrap-table][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
    }

是这个样子的

![6ea34ac05301609133385c597fbd7f65.png][]

现在要实现一个功能，根据输入input的参数来查询表格的数据集  
先在html里面加一个搜索框的标签

然后写一下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~~

![39e2369befa9c652b652c98f9fc101fd.png][]

[https_www.bootstrap-table.com.cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.bootstrap-table.com.cn%2F
[https_github.com_wenzhixin_bootstrap-table]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fwenzhixin%2Fbootstrap-table
[6ea34ac05301609133385c597fbd7f65.png]: /images/20221120/d6d6f73289804c5892d99798318f2772.png
[39e2369befa9c652b652c98f9fc101fd.png]: /images/20221120/5c8b5b8c2289466a99ba6d3792191843.png