Deleting rows and adding them in again

Dunhamzzz

Hi,

I'm having some major issues with datatables.
In my laptop database table, I wish to have checkboxes next to features (bluetooth, wifi etc) and as users check them it eliminates rows that do not contain them and then re-adds everything when they are unselected.

So far if a user selects a box the script loops through all checkboxes, and if it finds a checked box, will look for that feature (in the form of an image class) and use the fnDeleteRow() to remove it.

However, in trying to return the table to a normal state, I noticed that fnDraw does absolutely nothing. Now should this method RESTORE rows that have been deleted using fnDeleteRow()?? I assumed not, so went about my own way by replacing the tbody of the table with ajax so the table can effectively start again without reloading the page.
However, once again I found that simply calling fnDraw did nothing, even tho all the relevent html had been restored.

Here is my code:
[code]
var pTable;
pTable.dataTable({....}) //datatable setup

//Advanced Filtering
var checkboxes = $('#options input[type=checkbox]');
checkboxes.click(function() {
//Reset the table via ajax
$('#products-tbody').load('/ #products-tbody tr', false, function(){
pTable.fnDraw(); // redraw - this does not seem to do anything
checkboxes.each(function() { //loop thru checkboxes
var checkedValue = this.value; // store their value
if($(this).is(':checked')) { //if checked, look for checkedValue and remove it not present in a row
$(pTable.fnGetNodes()).each(function(i){
if($('img.'+checkedValue, this).length == 0) {
pTable.fnDeleteRow(i);
}
});
}
});
});
});

[/code]

Demo:
http://buyersguide.umpcmedia.com username and password is test/carrots

Interestingly, I set up a with an onclick event of fnDraw and everytime I press it, the whole page reloads which leads me to think my earlier call of fnDraw just isnt doing anything.

Basically I need to know why the table is not redrawing properly? Even after I repopulate the tbody with the original data?

Dunhamzzz

UPDATE

I have figured out my problem, albeit it taking a completely different route.

I create a hidden column for each feature (loads of extra markup but who cares) and populate the table cell with a simple "y" if it exists. Then it simple does the fnFilter on that table column. I didnt do this originally as I was only using one column for all the features and fnfilter only did a simple string check so it didnt work.

Please feel free to delete this post.

allan

Hi Dunhamzzz,

Great to hear you got this sorted. Going back to the original problem, I believe I can offer an answer for you (if I understand it correctly!). Assuming that you are using client-side processing, then fnDeleteRow() will simply remove the aoData index "pointer" from aiDisplay and aiDisplayMaster (i.e. the latter two arrays are the ones which are used by DataTables to draw the visual information, and contain indexes of aoData, which contains the original data - this allows sorting, filtering etc without serious overhead).

So to add a row back into the table, after it has been deleted, you just need to add it's index from aoData back into aiDisplay and aiDisplayMaster (probably just the latter would do, and then call fnDraw). The reason that this works is that fnDeleteRow doesn't delete the original data (unless you tell it to using a parameter), making it possible to do this restore.

However, if you have a solution that works - that's good news :-)

Regards,
Allan

Boris.Tk

Hi Allan,

I'm picking up the idea you described of adding the index back to aiDisplay and aiDisplayMaster.
I ran into the same problem and love the idea to reuse the "deleted" entries.

Do you have an example how to do that?


Regards,
Boris

Boris.Tk

... by simply using the search function, I found what I need :)

http://datatables.net/forums/comments.php?DiscussionID=469