前言
bootstrap-table 分頁方式可以選 server 和client 兩種分頁方式。
- 當選擇前端分頁（client）的時候，可以在頁面搜尋table表格資料（不查詢資料庫）
- 當選擇伺服器分頁（server）的時候，根據可以queryParams屬性設定條件查詢資料庫
本篇先學習擇前端分頁（client），在頁面搜尋篩選資料
bootstrap table 查詢搜尋配置
表格内容前端搜尋，不查詢資料庫
bootstrap table表格搜尋可以通過以下屬性進行設定
| 屬性名稱 | 值 | 說明 |
|---|---|---|
| search | true | 開啟搜尋輸入框 |
| searchOnEnterKey | 回車後執行搜尋 | |
| strictSearch | 完全比對搜尋，不是like模糊查詢 | |
| trimOnSearch | 自動去除關鍵詞兩邊空格 | |
| searchAlign | left/right | left搜尋框在左邊 right在右邊 |
| searchTimeOut | 1000 | 設定搜尋逾時時間，資料量很大時才有用 |
| searchText | 字元串 | 初始化時預設搜尋的關鍵詞 |
| customSearch | 自定義方法 | 自定義搜尋 |
| showSearchClearButton | 開啟清空按鈕 |
開啟搜尋框
開啟搜尋相關3個屬性
search: true, //是否顯示表格搜尋
searchOnEnterKey:true, //回車後執行搜尋//
showSearchButton: true, //搜尋确定按鈕
頁面顯示效果
輸入框輸入内容按回車，或點确定按鈕都可以在頁面上搜尋
完整的js内容
// 加載table
$(document).ready(function(){
var url = '/api/comparator/';
var columns = [
{
checkbox: true,
visible: true //是否顯示複選框
},
{
field: 'id',
title: 'ID',
class: 'col-md-1'
}, {
field: 'comparator',
title: '校驗方式',
class: 'col-md-5'
},
{
field: 'create_time',
title: '建立時間',
class: 'col-md-2'
},
{
field: 'update_time',
title: '更新時間',
class: 'col-md-2'
},
{
field:'operate',
title: '操作',
class: 'col-md-2',
align: 'center',
formatter: actionFormatter
}
];
$("#table").bootstrapTable({
toolbar: '#toolbar',
url: url, //請求背景的URL（*）
method: 'get', //請求方式（*）
cache: false, //是否使用緩存，預設為true，是以一般情況下需要設定一下這個屬性（*）
theadClasses: "bg-info",
pagination: true, //是否顯示分頁（*）
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 20, 50, 100, 'All'], //可供選擇的每頁的行數（*）
sidePagination: "client", //分頁方式：client用戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，預設第一頁
search: true, //是否顯示表格搜尋
searchOnEnterKey:true, //回車後執行搜尋//
showSearchButton: true, //搜尋确定按鈕
// showSearchClearButton: true, //清空輸入框
// singleSelect: true,#}
clickToSelect: true,
//showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示重新整理按鈕
// minimumCountColumns: 2, //最少允許的列數
//height: 500, //行高，如果沒有設定height屬性，表格自動根據記錄條數決定表格高度
classes: "table table-bordered table-striped table-condensed table-hover",
//showToggle: true, //是否顯示詳細視圖和清單視圖的切換按鈕
columns: columns, //列參數
//detailView: true, //是否顯示父子表
//得到查詢的參數，會在url後面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
queryParams: function (params) {
// params對象包含：limit, offset, search, sort, order
//這裡的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
var temp;
temp = {
page: (params.offset / params.limit) + 1, //頁碼, //頁碼
size: params.limit //頁面大小
//查詢框中的參數傳遞給背景
//search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
};
return temp;
}
});
搜尋框位置
預設搜尋框靠右，通過searchAlign屬性可以跳轉位置，left搜尋框在左邊 right在右邊
searchAlign: "left",
比對方式
searchText 設定初始化時預設關鍵字
searchText: '上海-悠悠',
strictSearch 設定比對方式，預設是模糊比對，設定為true 就是完全比對模式
strictSearch: true,
trimOnSearch 去除關鍵詞左右兩邊的空格
trimOnSearch: true,
删除清空按鈕
showSearchClearButton 屬性設定為true，可以顯示清空輸入框按鈕
showSearchClearButton: true, //清空輸入框
自定義搜尋方法
自定義搜尋，比如隻搜尋ID字段
customSearch:customSearch,//自定義搜尋，比如隻搜尋ID字段
});
function customSearch(data, text) {
return data.filter(function (row) {
return (row.Id+"").indexOf(text) > -1
})
參考資料:https://www.itxst.com/Bootstrap-Table/i3yqb332.html
線上執行個體: https://debug.itxst.com/js/b3efzmzu