Comment implémenter le champ de recherche et la requête de table dans Bootstrap

Cet article présente principalement le champ de recherche et la fonction de requête de la table Bootstrap. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

1. Points de connaissance Actualisation de la table bootstrap et configuration des requêtes

.

2. Améliorer les performances du code js

1. Réduire les déclarations de variables globales

2. Mettre en cache les résultats de recherche des nœuds dom

3.

/** 
 * @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); 
    }); 
}

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser le curseur pour définir les valeurs des données dans le mini-programme WeChat

Comment implémenter une fenêtre contextuelle en bas du menu du mini-programme WeChat

Comment utiliser la boîte de dialogue de message toast dans le mini-programme WeChat

Comment utiliser le composant de chargement pour afficher l'animation de chargement dans le mini-programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!