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/