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
    })
  }

在线试一试