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); }); }); ``` 頁面文本框和按鈕： 最終在頁面上展示： **參考地址：**