how to filter datagrid by all columns from one search field

[edus]

Hi,

I am trying to create one field (searchbox) to filter whole datagrid columns
Here is the code:
...

<script>
var data = [
              {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
           {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
           {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
           {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"N","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
        ];

$(document).ready(function(){
                  
          $('#fldSearch').searchbox('textbox').keyup(function() {
            searchTable('dg',$(this).val());
         });

       });
      
      function searchTable(tblID, inputVal)   {
         
         var table = $('#' + tblID);
         table.find('tr').each(function(index, row)
         {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
               var found = false;
               allCells.each(function(index, td)
               {
                  var regExp = new RegExp(inputVal, 'i'); // i - makes the search case-insensitive.
                  if(regExp.test($(td).text()))
                  {
                     found = true;
                     return false;
                  }
               });
               if(found == true)$(row).show();else $(row).hide();
            }
         });
      } // end searchTable
</script>

<table id="dg" title="DataGrid" style="width:700px;height:250px" data-options="
            singleSelect:true,
            data:data,
            toolbar:'#tb',       
         ">
      <thead>
         <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:250">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
         </tr>
      </thead>
   </table>
   <div id='tb' style='padding:5px 8px;'>
            Quick search: <INPUT id='fldSearch' class='easyui-searchbox' style='width:250px'
                                         data-options="prompt:'Type search criteria.'" />
          </div>

For some reason my searchTable function cannot hide <tr> rows in the datagrid..??
I've tried to use datagrid-filter.js option, but in this case filter added to each column, which I don't need.

Could you please help me with the solution?

Thanks in advance.

[jarry]

Here is the tutorial shows how to add search functionality.
http://www.jeasyui.com/tutorial/datagrid/datagrid24.php

[edus]

Here is the tutorial shows how to add search functionality.
http://www.jeasyui.com/tutorial/datagrid/datagrid24.php

Thank you for replay. However, this example requires re-loading all data from the server side. Is it possible to do it with local filtering?  Reloading from the server side could be time consuming especially when using keyup event ?

[jarry]

The local searching is similar to this tutorial. All you need to do is to filter the 'data' and call 'loadData' method to render the new rows. Please see the 'doSearch' function to learn how to achieve this functionality.

Code:

function doSearch(q){
    var rows = [];
    $.map(data, function(row){
        for(var p in row){
            var v = row[p];
            if (String(v).indexOf(q) >= 0){
                rows.push(row);
                break;
            }
        }
    });
    $('#dg').datagrid('loadData', rows);
}

[edus]

The local searching is similar to this tutorial. All you need to do is to filter the 'data' and call 'loadData' method to render the new rows. Please see the 'doSearch' function to learn how to achieve this functionality.

Code:

function doSearch(q){
    var rows = [];
    $.map(data, function(row){
        for(var p in row){
            var v = row[p];
            if (String(v).indexOf(q) >= 0){
                rows.push(row);
                break;
            }
        }
    });
    $('#dg').datagrid('loadData', rows);
}

Great, thanks! This is works as expected. I just changed the string checking to be more flexible:

                 function doSearch(q){
         var rows = [];
         
         $.map(data, function(row){
            for(var p in row){
               var v = row[p];
               var regExp = new RegExp(q, 'i'); // i - makes the search case-insensitive.
               if(regExp.test(String(v))) {
                  rows.push(row);
                  break;
               }
            }
         });
         $('#dg').datagrid('loadData', rows);
      }

Thanks again.