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.
|