bootstrap-table 怎么自定義搜索按鈕實現點擊按鈕進行查詢

bootstrap-table自帶搜索框感覺有點丑，我們可以把搜索功能單獨拉出來放到頁面的某一個位置。

首先我們看一下官方演示：

如果你感覺集成的檢索框不太好看，而且我們也不想讓搜索框和列表放到一塊去。那我們怎么來自定義一個屬於自己的搜索框吧！
首先我們看看這段代碼：
BootstrapTable.prototype.resetSearch = function (text) {
var $search = this.$toolbar.find('.search input');
$search.val(text || '');
this.onSearch({currentTarget: $search});
};
如果在表格toolbar里面是沒問題的，因為它找到 search樣式下面的一個輸入框。
因為我們自己定義的肯定是沒有這些屬性的，也會找不到這個搜索class.

 

我們改成：
BootstrapTable.prototype.loadAddSearch = function (text) {
this.onCustomizeSearch(text);
};

我們直接在這個加載搜索條件的方法中加入需要查詢的內容即可：

接着我們繼續找到自帶的搜索事件：
BootstrapTable.prototype.onSearch = function (event) {
var text = $.trim($(event.currentTarget).val());

// trim search input
if (this.options.trimOnSearch && $(event.currentTarget).val() !== text) {
$(event.currentTarget).val(text);
}

if (text === this.searchText) {
return;
}
this.searchText = text;
this.options.searchText = text;

this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
this.trigger('search', text);
};

我們把它改一下

BootstrapTable.prototype.onCustomizeSearch = function (text) {
this.searchText = text;
this.options.searchText = text;
this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
this.trigger('search', text);
};

然后我們在bootstrap默認方法中添加一下方法：
// BOOTSTRAP TABLE PLUGIN DEFINITION
// =======================

var allowedMethods = [
'getOptions',
'getSelections', 'getAllSelections', 'getData',
'load', 'append', 'prepend', 'remove', 'removeAll',
'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
'mergeCells',
'checkAll', 'uncheckAll', 'checkInvert',
'check', 'uncheck',
'checkBy', 'uncheckBy',
'refresh',
'resetView',
'resetWidth',
'destroy',
'showLoading', 'hideLoading',
'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
'showAllColumns', 'hideAllColumns',
'filterBy',
'scrollTo',
'getScrollPosition',
'selectPage', 'prevPage', 'nextPage',
'togglePagination',
'toggleView',
'refreshOptions',
'loadAddSearch',
'resetSearch',
'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
'updateFormatText'
];

然后保存文件即可

前端頁面javascript
$(function () {
//查詢搜索

$('#btnSearch').on('click', function () {
var keyvalue = $("#search-input").val();
$table.bootstrapTable("loadAddSearch", keyvalue);
});

});

頁面文本框和按鈕：
<input type="text" class="form-control" id="search-input" placeholder="檢索 ..." style="height: 30px; margin-top: 20px; margin-left: 1px" size="40" />

<button title="查詢" id="btnSearch" type="button" style="" class="btn btn-success onclickbtn">
<i class="fa fa-search onclickbtni" style=""></i>
</button>

最終在頁面上展示：

參考地址：

Bootstrap中文網：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源碼：https://github.com/wenzhixin/bootstrap-table
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/
Boostrap Table 擴展API：http://bootstrap-table.wenzhixin.net.cn/extensions/