Live DOM sorting and custom filtering

Antikon

Hi Allan!

I have a table which contains column X with checkboxes and strings. To sort this column I've modified Live DOM sorting example:
[code]
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
{
var aData = [];

$( 'td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
var t = $(this);
var s = t.find('input:checkbox');
if (s.size()) {
var n = s.val();
var val = (s.get(0).checked == true ? 1 : 0);
} else {
var v = $.trim(t.text());
var val = ((v == 'yes') ? 1 : 0);
}
aData.push(val);
} );
return aData;
};
[/code]

Now I'd like to add a custom filtering checkbox, which hide rows with contains checked checkboxes or 'yes' in column X:
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex) {
var status = aData[9];
var hide = document.getElementById('filteringCheckbox').checked;
if (hide && status) return false;
return true;
}
);
[/code]

But this function work properly only if I've sorted column X before, due to live Dom sorting function modifies an aData array for column X (instead raw HTML it puts 1 or 0).

What's the true way do achieve my goal?

allan

Hi Antikon,

I like it - some nice use of the more advanced APIs that DataTables presents. Cool. :-)

What you want to do certainly can be achieved, but rather than using aData[9], which as you are seeing can be out of data compared to the DOM, is to query the specific DOM entry. So you could do something like this:

[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex) {
var checked = $('td:eq(9) input', oSettings.aoData[ iDataIndex ].nTr).checked();
...
}
);
[/code]
What this is doing is making use of the reference that DataTables stored internally to the TR element for the row (which is done in the array aoData, with the property nTr), to get the current value.

Then whenever the filtering function is called, you can be sure that it will be using up-to-date information from the DOM.

Regards,
Allan

Antikon

I've considered such variant, but I afraid that in this case the logic of dom data analyse will be presented in 2 places: one in sort function and one in filtering function.

For my task, it would be better to have it only in one place. Is it possible, for example, to modify aData as decribed in dom-sort function on table init?

allan

Hi Antikon,

Yes, that approach is equally possible. What to do is make use of the fnUpdate API function: http://datatables.net/api#fnUpdate . Add an event handler to the check box such then when it is clicked fnUpdate will be called and update the aData information. You could then add a call to fnDraw which would do the filtering for you as soon as the box is checked.

Regards,
Allan

Antikon

Thanks a lot, Allan, and thank you for a great work on Datatables!