Home >Web Front-end >JS Tutorial >How to use toolbar in Bootstrap table to add new conditional query

How to use toolbar in Bootstrap table to add new conditional query

PHPz
PHPzOriginal
2018-05-28 15:42:165150browse

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:

How to use toolbar in Bootstrap table to add new conditional query

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn