bootstrap table查询搜索配置

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

属性名称说明
searchtrue开启搜索输入框
searchOnEnterKeytrue回车后执行搜索
strictSearchtrue
完全匹配搜索,不是like模糊查询
trimOnSearchtrue自动去除关键词两边空格
searchAlignleft/rightleft搜索框在左边 right在右边
searchTimeOut1000设置搜索超时时间,数据量很大时才有用
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
    })
  }
    在线试一试