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