Home >Web Front-end >JS Tutorial >How to use toolbar in Bootstrap table to add new conditional query
This time I will show you how to use the toolbar in the Bootstrap table to add a new conditional query. What are the precautions for using the toolbar in the Bootstrap table to add a conditional query? The following is a practical case, let's take a look.
【Related video recommendation: Bootstrap tutorial】
//工具按钮用哪个容器 toolbar: '#toolbar', <p></p>
The query conditions we defined are put into this p, let’s take a look first The effect we expect:
To achieve this effect, we must first add a new query form:
<p> </p><p> </p><p> </p><p> </p>
Get it from the parameters passed in the request server Corresponding value:
//请求服务器数据 queryParams: function queryParams(params){ var param = { pageNumber: params.pageNumber, pageSize: params.pageSize, sortName: params.sortName, sortOrder: params.sortOrder, searchText: $("#searchText").val(), msgType: $("#msgType").val(), productLine: $("#productLine").val() }; return param; }
Finally submitted to the server:
//查询 $(document).on('click', ".queryButton",function(){ $('#table').bootstrapTable('refresh'); });
This refresh official document describes it like this:
To refresh the remote server data, you can set {silent: true}
Refresh data silently and set {url: newUrl}
to change the URL.
To provide query parameters specific to this request, set {query: {foo: 'bar'}}.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of using Node.js Buffer
How to use JS to call the local camera
The above is the detailed content of How to use toolbar in Bootstrap table to add new conditional query. For more information, please follow other related articles on the PHP Chinese website!