Print Page - how to filter datagrid by all columns from one search field

Title: how to filter datagrid by all columns from one search field
Post by: edus on June 17, 2014, 01:08:36 PM

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.

Title: Re: how to filter datagrid by all columns from one search field
Post by: jarry on June 17, 2014, 07:56:32 PM

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

Title: Re: how to filter datagrid by all columns from one search field
Post by: edus on June 18, 2014, 07:03:59 AM

Quote from: jarry on June 17, 2014, 07:56:32 PM

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 ?

Title: Re: how to filter datagrid by all columns from one search field
Post by: jarry on June 18, 2014, 08:52:55 AM

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);
}

Title: Re: how to filter datagrid by all columns from one search field
Post by: edus on June 18, 2014, 11:01:47 AM

Quote from: jarry on June 18, 2014, 08:52:55 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: edus on June 17, 2014, 01:08:36 PM