Filtering by hiding rows

The Client-side Filtering of Local Data example shows how records can be filtered at the source. In certain circumstances, handling the visibility of the records is a good alternative. It is faster since it doesn't have to go through all the process of fetching the data, but it doesn't always work. For example, with client-side paging, pages will not all have the same number of rows, since some will not show. With server-side paging it doesn't make sense because, if you are relying on your server for the data, it is best to make it do the filtering. In both cases, it does work, it simply doesn't look good or it doesn't make sense.

In this example, I will selectively show the rows depending on whether they have an odd or even value in the Quantity column. I loop through the records in the DataTable using my forAllRecords iterator:

YAHOO.widget.DataTable.prototype.forAllRecords = function (fn,scope) { if (!Lang.isFunction(fn)) {return;} scope || (scope = this); for (var rs = this.getRecordSet(), l = rs.getLength(), i = 0; i < l; i++) { if (fn.call(scope, rs.getRecord(i), i) === false) return; } };

On listening to the click on the checkbox, I loop through the records setting a className on the records with odd quantities:

Event.on('showEvenQtys','click', function(ev) { var target = Event.getTarget(ev); if (target.checked) { dt.forAllRecords(function(r) { if (r.getData('Quantity') & 1) { Dom.addClass(this.getTrEl(r),HIDDEN); } }); } else { Dom.removeClass(Dom.getElementsByClassName(HIDDEN),HIDDEN); } redoStripes(); });

I first read the value of the showEventQtys checkbox and if true, I add the className HIDDEN (a constant defined elsewhere) to the corresponding table row. If the checkbox is unmarked, I remove that className wholesale making them all visible. The className is defined thus:

.yui-skin-sam .yui-dt tr.hidden { display:none; }

If I were to do only this, I would end up with the light and dark stripes all messed up. That is why I call function redoStripes(). The built-in private method to do the stripes doesn't help us because it relies on the indexes of the Records, which are still there, they are not visible, but they are there. So I had to redo the striping assuming some records will not be showing:

var redoStripes = function() { var odd = true, tr = dt.getFirstTrEl(), EVEN = YAHOO.widget.DataTable.CLASS_EVEN, ODD = YAHOO.widget.DataTable.CLASS_ODD; do { if (!Dom.hasClass(tr,HIDDEN)) { if (odd) { Dom.replaceClass(tr, EVEN, ODD); } else { Dom.replaceClass(tr, ODD, EVEN); } odd = !odd; } tr = dt.getNextTrEl(tr); } while (tr); };