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