YUI Library Examples: DataTable Control: Client-side Filtering of Local Data

In this example, a local data set of area codes can be filtered by entering state names (case insensitive). A simple keyup listener on the input element refreshes the DataTable after a slight delay—to allow for more input.

The filtering is accomplished by defining the DataSource's doBeforeCallback hook and replacing the results array in the response.

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    var Ex = YAHOO.namespace('example');

Ex.dataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes,{
        responseType : YAHOO.util.DataSource.TYPE_JSARRAY,
        responseSchema : {
            fields : ['areacode','state']
        },
        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].state.toLowerCase().indexOf(req)) {
                        filtered.push(data[i]);
                    }
                }
                res.results = filtered;
            }

return res;
        }
    });

Ex.cols = [
        { key: 'areacode', sortable: true },
        { key: 'state', sortable: true }
    ];

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

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

Ex.dataTable = new YAHOO.widget.DataTable('tbl',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:'areacode', 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);
    });
});

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

DataTable Control Examples:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.