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~~

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,569评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,499评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,271评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,087评论 0赞 209
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,474评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,670评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,911评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,636评论 0赞 202
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,397评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,607评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,093评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,418评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,074评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,092评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,865评论 0赞 196
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,726评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,627评论 2赞 270

Bootstrap Table根据参数搜索功能

推荐阅读更多精彩内容