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默认方法中添加一下方法： ``` 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); }); }); ``` 页面文本框和按钮： 最终在页面上展示： **参考地址：**