Client side filter YUI Datatable with list selected?

Question

Can I filter rows of a static dataset with a few drop-down menus and paginated by YUI?

http://www.mappingbahia.org/project/iguape_dataset.html

Answer 1

Each YAHOO.widget component, such as the YUI DataTable, uses a YUI DataSource , which provides the necessary data. To populate each displayed component YAHOO.widget . Below you can see how it works.

Note that each component of YAHOO.widget internally makes a call to the underlying YUI data source. sendRequest method (See Step 1). Now let's see sendRequest signature

sendRequest(request, callback) 

• Inquiry

For remote data, this query can be a param / value string , such as "id = 123 & name = foo". For local data, this query may be a simpler value, for example 123. Setting parameters may not be relevant, so this value may just be zero

• callback

This is just a JavaScript object that can be described as follows (pay attention to each property)

 var callback = { success:function(request, response, payload) { /* * successful request is performed by success property */ }, failure:function(request, response, payload) { /* * failure request is performed by failure property */ }, scope:null, argument:null } 

So, when each component of YAHOO.widget makes a call to the YUI Internal Data Source. The sendRequest method passes a built-in callback object, as shown above , which takes care of the processing of the YAHOO.widget component itself. Therefore , if you want to create custom behavior , you need to make a call to the base YUI data source and pass your own callback object. Filter the data provided by the YUI data source as follows

 var datatable = // YUI datatable settings goes here 

To attach each change event. For each choice you can use

 YAHOO.util.Event.addListener("sex", "change", function(e) { var value = e.getTarget(e).value; if(YAHOO.lang.isValue(value)) { /** * Notice i am retrieving The underlying datasource To make a call To sendRequest method */ datatable.getDataSource().sendRequest(null, { success:function(request, response, payload) { /** * because scope property (see bellow) refers To The datatable * this keyword can be used To get a reference To The datatable */ /** * initializeTable method clear any data stored by The datatable */ this.initializeTable(); var rs = response.results; var filtered = []; for(var i = 0; i < rs.length; i++) { /** * Is The sex property equal To The value selected by The user ? */ if(rs[i]["sex"] == value) { filtered[filtered.length] = rs[i]; } } this.getRecordSet().setRecords(filtered, 0); // Update UI this.render(); }, scope:datatable, argument:null }); } }); 

Althoug not Tested, I'm sure it will work fine.