How to implement Table search box and query in Bootstrap

This article mainly introduces the Bootstrap Table search box and query function. It is very good and has reference value. Friends in need can refer to it

1.. Knowledge points bootstrapTable refresh and query configuration

2. Improve js code performance

1. Reduce global variable declarations

2. Cache dom node search results

3. Local variables cache global variables

/**
 * @param col bootstrapTable列表生成配置对象
 */
var searchValue ={};//查询匹配对象
var $button = $(&#39;<p class="columns pull-right search-button"><button class="btn btn-default" type="button" name="refresh" title="查询"><i class="glyphicon glyphicon-search icon-search"></i></button></p>&#39;);
var $input = $(&#39;<p class="columns pull-right search-input"><input class="form-control" type="text" placeholder="搜索"></p>&#39;);
var $select = $(&#39;<p class="columns pull-right search-select"><select></select></p>&#39;);
var addSearchGroup = function(col)
{
   // 插入选项
   var button ,input,select;
   button = $button;input = $input;select = $select;////局部变量缓存全局变量 提高代码性能
   var selectDom = $select.find(&#39;select&#39;);////缓存dom节点查找结果 避免在循环里用
   for(var i = 0; i < col.length; i++){
     if(col[i].visible != false){
       var $option = &#39;<option value="&#39;+col[i].field+&#39;">&#39;+col[i].title+&#39;</option>&#39;;
       selectDom.append($option);
     }
   }
   //插入多选框、输入框、按钮
   $(&#39;.fixed-table-toolbar&#39;).append(button,input,select);
}
/*
button = $button
*/
searchAction($button);
function searchAction(button){
  //写入上一次查询的条件
   if(searchValue.select != undefined){
     $select.find(&#39;select&#39;).val(searchValue.select);
   };
   if(searchValue.input != undefined){
     $input.find(&#39;input&#39;).val(searchValue.input);
   };
   //写入查询条件
   // 获取查询选项
   button.click(function(){
      var option = $select.find(&#39;select&#39;).val();
      var inputval = $input.find(&#39;input&#39;).val();
      searchValue.select =option;
      searchValue.inputval =inputval;
   //定义刷新参数
     if(inputval != &#39;&#39;){
       var param = {
         url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),
         query: {
           filters:[
             {&#39;colname&#39;:option,&#39;filtertype&#39;:&#39;LIKE&#39;,&#39;filtervalues&#39;:inputval}
           ]
         }
       }
     }else{
       var param = {
        url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),
       }
     }
      // 刷新表格
    $(&#39;#tablelist&#39;).bootstrapTable(&#39;refresh&#39;,param);
    });
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use slider to set data value in WeChat mini program

How to achieve pop-up bottom in WeChat mini program Menu

How to use the toast message dialog box in the WeChat applet

How to use the loading component to display the loading animation in the WeChat applet

The above is the detailed content of How to implement Table search box and query in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!