How to hide row automatically based on entry in column, with option to show all and hide all

FurnishedHomes

Hi,

I would like to create a new column in my datatable called delivery status. It will say either pending or complete. When the entry says complete it will automatically hide that row. However if the user clicks a show all button it will re-appear and they can change the status to pending, then click a button to hide all 'completed' again. Is this possible? I would love to post a link but unfortunately the site is not live but on a local server and contains private information. Any help would be much appreciated

allan

Yes this is quite possible. There are two separate tasks here:

1. Add the new column. you can do that by simply adding it to the HTML and Javascript used for the table (the PHP as well if you are using the Editor PHP libraries). Sounds like either would be a good option for either a radio input or select input.

2. Showing and hiding the rows: I'd do that by applying a filter to the table. You could either use the global filter, but more likely (since you will probably want to keep the global filter for the user's use) you'll want to use a custom filter: http://datatables.net/development/filtering#row_filters . Using that method you could simply set a variable to indicate if the rows should be filtered out or not and the filtering plug-in would act on that. Then simply redraw the table whenever you want to update the display ( fnDraw ).

Allan

FurnishedHomes

Thanks Alan!

ok, well I've added my new column but I had to edit 216 entries to reflect the new column! So been a bit delayed. I have also been looking at this thread
http://datatables.net/forums/discussion/7280/programmatically-hide-rows/p1

would something like this work? (where my column is called status and the entries are pending or completed) If so how would I implement it on my html page with 2 buttons to show all and to hide all again. (or would I not need a hide all again if I were to refresh the page?

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

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

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

$("#deliveriesdb").dataTable().fnDraw();
return false;
});

FurnishedHomes

Ok so I put the code above into a separate js file and linked it to my html file. However I can't tell if its working because I'm pretty sure I'm missing something with buttons!

I've tried a number of things to try and get a button talking to that js file including:

Hide / Show Completed Jobs

Some help with this would be great, assuming the code above is correct and should work Im just a button away from a finished project!

FurnishedHomes

Hello, after a bit of a fixed header installation break i'm back on this problem and still struggling! Any help much appreciated!

allan

I've put a little example together, of how it might be done here: http://live.datatables.net/orufil/edit#javascript,html . Note that the filter uses `aData[0]` at the moment - that's because the data is being read from the DOM into an array, and the first column is the one that is interesting for the filter. You will probably need to change that condition to get the data from wherever it is in your data object `aData.status` perhaps?

I've used a global variable `_show` as well to try and keep the filter nice and fast, but you might want to tidy that up into a private parameter possibly.

Regards,
Allan

FurnishedHomes

This works! Thank you Allan, the only niggly thing is that pre-existing rows containing the word pending (which is the default on the input form) have to be opened and updated in order for the code to work. So we have a task of opening and updating over 300 rows this afternoon! But at least it works!!! Beyond happy!

allan

I presume its in an SQL database the "Pending" is it? Can you not just run something like `UPDATE {table} SET status = 'Completed' WHERE status = 'Pending';` (assuming that you want all currently pending tasks to be marked as completed).

Allan

FurnishedHomes

No, they already say pending and they need to say pending still! I have three datatables and fortunately the one with 330 rows seems to miraculously work from the off, so its just the two smaller tables that need a bit of updating so its not really a bother now, thanks again Allan

RDCTBR

Hi Allan,

I know I'm digging this up from the grave. But I'd love to see that example again. Trying to work to a deadline but can't seem to get this functionality sorted.

allan

I knew that JS bin upgrade would bite me sometime... Doh :-(.

Basically what I had done was to simply use a custom filter ( http://datatables.net/development/filtering - "Custom row filter" section) which would read a variable that was set by a click on a console. Clicking on it, would set the variable and cause a redraw. The redraw causes the filter to occur and thus the table is correctly displayed.

I'm a bit rushed at the moment so I can recreate it as was just now, but if you run into problems let me know and I'll try to do so next week.

Allan