Add rows back after fnDeleteRow

jamiller

So I'm doing some filtering and using fnDeleteRow to achieve this, which works great. fnFilter just doesn't work with for my example, see below.

The problem I am having is trying to add the rows back in after they are "deleted." Any ideas?
[code]
$('#vtCheckBox').click(function() {
var l = dtVTable.fnGetNodes().length;
if($(this).is(':checked')) {
for(i=0; i

flies

Hmmm... Don't know if i understand correctly your code...
You are deleting rows which column 3 is < 15 and column 4 is < 60 that's for sure... why not just regex this columns?

^[0-1][0-4]$ and column 4 ^[0-5][0-9]$ instead of deleting?

jamiller

I think you're talking about using fnFilter?

I'll give it a try. But tell me, where do you get your numbers? i.e. [0-1][0-4]?

jamiller

ahh. i get it...

will give it a try

flies

I give you the opposite :) it lists the rows which should be deleted. Here is the correct one (I suppose)


^([1][5-9]|[2-9][0-9]|[1-9][0-9]{2,3})$

should give you range 15-19,20-99 and 100 - 1999


Accordingly:

^([6-9][0-9]|[1-9][0-9]{2,3})$

should give you range:

60-99, 100-1999

jamiller

right, i figured that out. but worked beautifully! thanks!

jamiller

Alright, again running into some issues.

This solution works great for a checkbox where I'm filtering values that are greater than pre-defined values. But I also have another filter option that includes two radio buttons, "Above" or "Below" with two dropdowns, one representing column 3 values and the other representing column 4 values. The user can choose to filter only those that match above, or below, the values they select.

I'm not that familiar with regex although I think I've been doing a decent job learning and right now I have if else statements all over my code to achieve this using regex.

So I think it would actually be better to do an fnDeleteRow in this circumstance. Any ideas how to add them back after deleted?

flies

I created another array where i store arrays of deleted rows:

var delArr = new Array();

just before: fnDeleteRow getdata for this particular row and delArr.push(row)

then when resetting filtering just get the rows from delArr and fnAddData to datatables...

flies

Another way is to collect indexes of deleted rows.
When resetting checkbox you then getdata from those indexes and using fnAddData add them back.

jamiller

I know I tried that, but I was obviously doing something wrong because now it works! Thanks so much for the replies, you've been a big help!

One more thing. The last column on my table is set to display:none and when adding the rows back to the table, they are now visible. Obviously fnGetData doesn't retain css, but the Search box built into dataTables does...

I know I could do a simple td:last.hide() on my table but obviously there is something built into dataTables that I do not know about to keep the display:none.

flies

set parameter: bVisible: false
for the last column it will sort that out ;)

http://datatables.net/examples/example_hidden_columns.html

jamiller

Neverending complications here... sigh

Apparently once the deleted rows are added back, i.e. the user performs a filter and then clicks a "Reset" button, the dataTables.fnGetNodes().length is now the total number of rows originally plus the rows that were "deleted."

I'm assuming this is because I'm using fnAddData to add the rows back and that I'm not actually "undeleting" the rows but rather adding that deleted row's data back to the table, which is NOT what I want. As you can see this is just adding duplicates, and many of them if the table is filtered and reset many times.

I looked at the source code and found this:
/*
* Function: fnDeleteRow
* Purpose: Remove a row for the table
* Returns: array:aReturn - the row that was deleted
* Inputs: int:iIndex - index of aoData to be deleted
* Notes: This function requires a little explanation - we don't actually delete the data
* from aoData - rather we remove it's references from aiDisplayMastr and aiDisplay. This
* in effect prevnts DataTables from drawing it (hence deleting it) - it could be restored
* if you really wanted. The reason for this is that actually removing the aoData object
* would mess up all the subsequent indexes in the display arrays (they could be ajusted -
* but this appears to do what is required).
*/
So it appears what I really want is to add back the references from aiDisplayMastr and aiDisplay. Any ideas on how to accomplish this?

allan

Hi,

So you have two options here:

1. Use fnUpdate() if you are currently deleting and then adding a row. This would take take of the fnGetNodes issue for you.

2. Continue to delete and add rows, but pass "true" as the third parameter (new in DataTables 1.5), and this will null the row that you are deleting - thus making the fnGetNodes() handling much easier for you in future (the length will still be the same, but the target index will be null). The reason for this is that the indexing of aoData in DataTables is very important, and changing that indexing could add a whole lot of complications - both internally and externally!

Regards,
Allan

jamiller

Thanks Allan for the response but I must not be doing something right. Here's my code:
[code]
var delArr = [];
$('#VtFilter').click(function() {
// Two radio buttons. One is "Above" and the other is "Below"
// If "Above" is checked, must be above, else it's "Below"
var above = ($('#Vt input[name="Vtbp"]:checked').val() == "above") ? true : false;
// Then two drop downs (selects) that correspond to column 2 and 3 of the table
// I multiply by 1 to make sure JavaScript knows it's a number...
var vts = ($('#VtS option:selected').text()*1);
var vtd = ($('#VtD option:selected').text()*1);

// For example, the user can filter values that are
// Above 120 AND 49 in the table

// Number of table rows, which is dynamic
l = dtVt.fnGetNodes().length;

if($('#Vt input[name="Vtbp"]').is(':checked')) {
// loop through each row of the table and
// "delete" rows...
for(i=0; i vts || row[3] > vtd) {
delArr.push(i);
dtVt.fnDeleteRow(i);
}
}
}
} else {
// Open an error window. Not relevant to my problem...
modalOpen("SelectionError", "Vt");
}
});

// Vt Reset Button
$('#VtClear').click(function() {
if(delArr !== null) {
// Loop through the deleted row indexes and add them
// back to the table
for(i=0; i

allan

Okay, if you want to add rows back into the display (i.e. reset) then what you need to do is look through aiDisplayMaster, and find if each index that is used in aoData (i.e. .length-1) is present in aiDisplayMaster (you could use jQuery's inArray to help). If it is not, then push that index back onto the master - that will effectively restore the row. Then once you've checked all of them, just call fnDraw().

Regards,
Allan

jamiller

Awesome! Looks like everything is working now! I think the key was aiDisplayMaster. And all I needed to do was to simply push the deleted row indexes back into this array! Sweet...

Here is my code for reference:
[code]
var delArr = [];
$('#VtFilter').click(function() {
var above = ($('#Vt input[name="Vtbp"]:checked').val() == "above") ? true : false;
var vts = ($('#VtS option:selected').text()*1);
var vtd = ($('#VtD option:selected').text()*1);

l = dtVt.fnGetNodes().length;

if($('#Vt input[name="Vtbp"]').is(':checked')) {
// loop through each row of the table and
// "delete" rows...
for(i=0; i vts || row[3] > vtd) {
if($.inArray(i, delArr) == -1) {
delArr.push(i);
}
dtVt.fnDeleteRow(i);
}
}
}
} else {
// Open an error window.
modalOpen("SelectionError", "Vt");
}
});

// Vt Reset Button
$('#VtClear').click(function() {
if(delArr.length > 0) {
var oSettings = dtVt.fnSettings();
// Simply push all indexes from delArr
// into aiDisplayMaster
for(i=0; i