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
Release: 2018-10-16 15:36:21
Original
5114 people have browsed it

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>
Copy after login

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>
Copy after login
     

           

      

产品线

                        

           

      

消息类型

                        

           

      

消息类型

                             
       
    

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; 
  }
Copy after login

Finally submitted to the server:

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

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template