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/

bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询的更多相关文章

  1. 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  2. eazyui 或bootstrap table表格里插入图片,点击查看大图

    columns: [ {field: 'state',checkbox: true,align: 'center',valign: 'middle'}, {field: 'contacts',sort ...

  3. Repeater中添加按钮,点击按钮获取某一行的数据

    1.添加编辑按钮和删除按钮 <asp:Repeater ID="Repeater1" runat="server" onitemcommand=" ...

  4. form表单中新增button按钮,点击按钮表单会进行提交

    原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”

  5. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  6. bootstrap table分页,重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...

  7. win32 htmlayout点击按钮创建新窗口,以及按钮图片样式

    最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...

  8. Python+Selenium自动化-清空输入框、输入内容、点击按钮

    Python+Selenium自动化-清空输入框.输入内容.点击按钮   1.输入内容 send_keys('valve'):输入内容valve #定位输入框 input_box = browser. ...

  9. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

随机推荐

  1. (转)关于BigDecimal 转化字符串toPlainString()和toString()的区别

    对于  BigDecimal b ;     (b=(0.4321)^ 20)String s = b.toPlainString() ;System.out.println(s) ; 输出为:0.0 ...

  2. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

  3. 用Emacs收发邮件

    使用Emacs,将尽可能多的工作放到Emacs中来完成,这样可以提高工作效率. 1.安装必要的LISP插件和程序 $sudo apt-get install stunnel4 $sudo apt-ge ...

  4. jquery获得表格可见行的大小数量

    alert($("#tableId").find("tbody tr[moban='true']").find(":visible").si ...

  5. RabbitMQ windows安装官方文档翻译!

    RabbitMQ Windows安装和配置 下载地址 官网windows下载地址: http://www.rabbitmq.com/releases/rabbitmq-server/v3.6.10/r ...

  6. fiddler4手机抓包

  7. html5小游戏基础知识

    显示一个DIV和隐藏一个DIV 首先,我们要显示一个DIV和隐藏一个DIV需要使用css里面使用: .hide{ display:none;} .show{display:block;} 在需要显示或 ...

  8. powerdesinger(MSSQLSRV2008测试通过)通过Name或comment 导出注释到sql脚本,生成sql的说明备注,包括表注释信息

    导出字段信息name注释到sql2008字段的说明 在database -> edit current dbms -> MSSQLSRV2008::Script\Objects\Colum ...

  9. Django+MySQL开发项目:内容管理系统cms(一)

    Baker-Miller Pink被科学方法证实可以平静情绪并且抑制食欲的颜色,具有amazing的效果.基百里面说实验结果表明该颜色具有: "a marked effect on lowe ...

  10. 把sql输出成。sql文件

    作者原创,转载注明出处: 代码: package importfile; import java.io.*; import java.io.PrintWriter; import java.sql.C ...