Forums

Hello,
I am very new to YUI and I am running into a problem. Using the example http://developer.yahoo.com/yui/examples ... ilter.html, I have successfully populated my datatable and I am able to filter the modality column. I want to also be able to have the option to sort by at least two more columns, say environment, and step. When ever I attempt to add more than just the first filter, it over rides and only will take the last filter. How would you go about breaking up the filter function so that you can have multiple filters?

The following is my code for just a single filter:

<div class="markup">
<label for="filter">Filter by modality:</label> <input type="text" id="filter" value="">



<div id="xml"></div>

</div>

<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
var Ex = YAHOO.namespace('http://localhost:8080/chimeras/filter');

Ex.dataSource = new YAHOO.util.DataSource("http://localhost:8080/chimeras/current_identities",{
responseType : YAHOO.util.DataSource.TYPE_XML,
connMethodPost : true,
responseSchema : {
resultNode: "identity",
//fields : ["step","vendor"]
fields : ["identity_id","transaction_id", "person_id","modality","environment","encoded","inserted","chimera_added","step","error", "encode_date","insert_date","chimera_date", "create_date","vendor","biometric_vendor_key"]
},
doBeforeCallback : function (req,raw,res,cb) {
//This is the filter function
var data = res.results || [],
filtered = [],
i,l;

if (req) {
req = req.toLowerCase();
for (i = 0, l = data.length; i < l; ++i) {
if (!data[i].modality.toLowerCase().indexOf(req)) {
filtered.push(data[i]);
}
}
res.results = filtered;
}

return res;
}
});

Ex.cols = [
//{ key: 'step', sortable: true },
//{ key: 'vendor', sortable: true }
{key:"identity_id", label:"Identity ID", sortable:true},
{key:"transaction_id",label:"Trans ID", sortable:true},
{key:"person_id",label:"PIN", sortable:true},
{key:"modality",label:"Modality", sortable:true},
{key:"environment",label:"Environment", sortable:true},
{key:"encoded",label:"Encoded", sortable:true},
{key:"inserted",label:"Inserted", sortable:true},
{key:"chimera_added",label:"Chimera", sortable:true},
{key:"step",label:"Current State", sortable:true},
{key:"error",label:"Error", sortable:true},
{key:"encode_date",label:"Encode Date", sortable:true},
{key:"insert_date",label:"Insert Date", sortable:true},
{key:"chimera_date",label:"Chimera Date", sortable:true},
{key:"create_date",label:"Create Date", sortable:true},
{key:"vendor", label:"Vendor",sortable:true},
{key:"biometric_vendor_key",label:"Vendor Key", sortable:true}

];

Ex.paginator = new YAHOO.widget.Paginator({
rowsPerPage : 10,
pageLinks : 5
});

Ex.conf = {
paginator : Ex.paginator,
sortedBy: {key:'step', dir:YAHOO.widget.DataTable.CLASS_ASC}
};

Ex.dataTable = new YAHOO.widget.DataTable('xml',Ex.cols,Ex.dataSource,Ex.conf);

Ex.filterTimeout = null;
Ex.updateFilter = function () {
// Reset timeout
Ex.filterTimeout = null;

// Reset sort
var state = Ex.dataTable.getState();
state.sortedBy = {key:'step', dir:YAHOO.widget.DataTable.CLASS_ASC};

// Get filtered data
Ex.dataSource.sendRequest(YAHOO.util.Dom.get('filter').value,{
success : Ex.dataTable.onDataReturnInitializeTable,
failure : Ex.dataTable.onDataReturnInitializeTable,
scope : Ex.dataTable,
argument: state
});
};

YAHOO.util.Event.on('filter','keyup',function (e) {
clearTimeout(Ex.filterTimeout);
setTimeout(Ex.updateFilter,600);

});


});
</script>

Or is there an easier way to do this?
Thank you so much for all your help in advance!

Please excuse my lack of formatting in the original post. This is my first post in the forum and was not aware of the pastie approach. Thank you for letting me know. The link to my code is: http://pastie.org/1075394
Please let me know if this is still a problem.

And again, I am trying to modify the doBeforecallback function so that I can have multiple filters for my data.

Thank you all again for all your help.