Bootstrap表格插件Bootstrap Table配置教程

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
    })
  }
    在线试一试
文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式