bootstrap table查询搜索配置

bootstrap table查询搜索指的是表格内容前端搜索，而不是查询数据库进行搜索，如果要对数据库服务端进行搜索可以queryParams属性相对应的教程。bootstrap table表格搜索可以通过以下属性进行设置。

属性名称	值	说明
search	true	开启搜索输入框
searchOnEnterKey	true	回车后执行搜索
strictSearch	true	完全匹配搜索，不是like模糊查询
trimOnSearch	true	自动去除关键词两边空格
searchAlign	left/right	left搜索框在左边 right在右边
searchTimeOut	1000	设置搜索超时时间，数据量很大时才有用
searchText	字符串	初始化时默认搜索的关键词
customSearch	自定义方法	自定义搜索

search开启搜索框

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, //******开启搜索框****// search:true });

searchOnEnterKey回车后执行搜索

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:true, //******回车后执行搜索****// });

   在线试一试

strictSearch完全匹配

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true //******完全匹配****// });

 

trimOnSearch去除关键词空格

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true //去除关键词空格// });

searchAlign搜索框位置

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true, //去除关键词空格// searchAlign:"left" });

searchText默认搜索关键词

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true, //去除关键词空格// searchAlign:"left", searchText:"苹果" });

customSearch自定义搜索

//bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true, //去除关键词空格// searchAlign:"left", customSearch:customSearch,//自定义搜索，比如只搜索ID字段 }); function customSearch(data, text) { return data.filter(function (row) { return (row.Id+"").indexOf(text) > -1 }) }