How to use new conditional query and refresh parameter in toolbar in Bootstrap table

This article mainly introduces the new condition query and refresh parameter usage of toolbar in Bootstrap table. It is very good and has certain reference value. Friends who need it can refer to it.

Recommended tutorial: Bootstrap graphic tutorial

## How do we want to customize the query conditions in bootstrap-table What about implementation? Where are these custom buttons and input boxes defined?

//工具按钮用哪个容器
  toolbar: '#toolbar', 
<div id="toolbar"></div>

The query conditions we defined are put into this div. Let’s first look at the effect we expect:

To achieve this effect, We first need to add a new query form:

<div class="container">
 <div class="row">
  <div class="table-responsive">
   <div id="toolbar">
    <form class="form-inline">
     <div class="form-group">
     <label class="sr-only" for="product_line">产品线</label>
     <div class="input-group">
      <div class="input-group-addon">产品线</div>
      <select class="form-control" name="product_line" id="productLine">
       <option value="">请选择产品线...</option>
      </select>
     </div>
     </div>
     <div class="form-group">
     <label class="sr-only" for="msg_type">消息类型</label>
     <div class="input-group">
      <div class="input-group-addon">消息类型</div>
      <select class="form-control" name="msg_type" id="msgType">
       <option value="">请选择消息类型...</option>
      </select>
     </div>
     </div>
     <div class="form-group">
     <label class="sr-only" for="msg_type">消息类型</label>
     <div class="input-group">
      <div class="input-group-addon">消息类型</div>
      <input type="text" class="form-control" name="searchTexts" id="searchText" placeholder="请输入消息名称或内容关键字...">
     </div>
     </div>
     <button type="button" class="btn btn-primary queryButton">查询</button>
    </form>
   </div>
   <table id="table" ></table>
  </div>
 </div>
</div>

Get the corresponding value from the parameters passed in the request server:

 //请求服务器数据
  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, submit it to the server:

 //查询
 $(document).on('click', ".queryButton",function(){
   $('#table').bootstrapTable('refresh');
 });

This The refresh official document describes it like this:

To refresh the remote server data, you can set

{silent: true} to refresh the data silently, and set {url: newUrl }Change URL.

To provide query parameters specific to this request, set

{query: {foo: 'bar'}}.

Summary

The above is the editor’s introduction to the use of new condition queries and refresh parameters for toolbar in Bootstrap table Method, I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time.

The above is the detailed content of How to use new conditional query and refresh parameter in toolbar in Bootstrap table. For more information, please follow other related articles on the PHP Chinese website!