programmatically hide rows

pjvidal

hi,

so here's what i'm trying to do, roughly speaking:

- user clicks a button outside of the table that says, "show only unapproved records"
- i'd loop through or use a selector to get all the tr's with a custom data element or class "approved"
- all "approved" rows are then hidden/filtered from the table leaving only the "unapproved" records visible
- users could then toggle to show/hide those rows again

i can't, however, figure out how to do this with datatables. normally, i'd use jquery to get my selection set together and then do "hide" or even "remove".. but that changes once datatables has been initialized on the table.

how can i handle this situation?

thanks for the help,
paul

allan

Hi Paul,

Because DataTables implements its own filtering, and as it removes elements from the DOM that are not needed in a given draw, you will need to hook into the DataTables API to implement your custom filtering. Specifically you want to use afnFiltering :http://datatables.net/development/filtering#row_filters .

This is an array of filtering functions which you define, and each function (you'll likely only need one) is run on each draw. You then simply inspect the row in question to see if you want to allow DataTables to include it or not, and if so return true, if you want it removed return false.

To get the TR element in question would would do something like:

[code]
$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
     var nTr = oSettings.aoData[ iDataIndex ].nTr;
     // test for property on nTr
return true; // or false as required
    }
);
[/code]

Allan

pjvidal

that'll work.. thanks. the performance is fine, though i have only 36 rows at the moment. hopefully it'll keep up.

thanks for the response and putting together this plug-in. best out there by far ;)

[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex )
{
var row = oSettings.aoData[iDataIndex].nTr
, show = $(".toggle-row-display .selected").data("show")
, status = +$(row).data("action_approved");

if(show === "all")
{
return true;
}
else if(show === "approved")
{
return (status === 1);
}
else if(show === "unapproved")
{
return (status === 0);
}
else
{
return true;
}
}
);

$(".toggle-row-display a").live("click", function()
{
$(".toggle-row-display a").removeClass("selected");
$(this).addClass("selected");

$("#action-table").dataTable().fnDraw();
return false;
});
[/code]

allan

Nice one - good to hear that does the job for you and thanks for sharing your solution with us!

Regards,
Allan

nincha

Hey guys,

I used the method above to do this. Is there any ways to save arbitrary info in the data tables state cookie? I would like the save my custom filtering parameters in the same cookie.

allan

Yes - use fnStateSaveParams and fnStateLoadParams .

Allan