[Solved] fnDeleteRow multiple rows at once
[Solved] fnDeleteRow multiple rows at once
I am using DataTables to populate a table from a mySQL Datasource.
I am using form checkbox elements in a DataTables row to allow an end-user to check multiple rows, and once submitted, the server (will) delete the appropriate rows from the Database. I am attempting to do this all within an AJAX environment so the page does not need to be refreshed. So upon a successful return from the ajax source, I would like to remove the elements visually from the table.
When the server JSON encodes the data that is passed to DataTables, it assigns each row a checkbox with the row count. So when you begin checking the checkboxes off, they are identified by the row # correctly. Each row number then gets saved to an array and passed to the server for database deletion, and to then the client proceeds with that same array for visual deletion of the rows (shown below):
To visualize this, some sample mock data (simplified):
[code]
NAME AGE ROW# DELETE?
Jill 25 0 X
jack 15 1
john 99 2 X
[/code]
In this example I am deleting row 0, and row 2 from the table display. I do this as follows (again simplified):
[code]
for(var i in rowIDs) {
oTable.fnDeleteRow(rowIDs[i]);
}
[/code]
This issue I am having is that once the first row is deleted, DataTables automatically re-assigns the row numbers before the next iteration. So in the example above, John's row # changes from 2 to 1 as far as DataTables is concerned once the Jill row is deleted. In the next iteration, it attempts to delete row 2, but there is of course, no row 2 anymore.
QUESTION: Given *only* the original row numbering scheme, how can I effectively remove multiple random rows without subsequent iterations failing?
Please note that I am fairly terrible at Javascript, but quite decent with PHP and MySQL. Also note I cannot mess with the database itself, as it would break the normalization requirements there. So I'm left with PHP and JS. Since I've already determined the original (before any deletes) row # in php, I'm guessing the answer lies in JS. Given my knowledge of javascript, code samples would be *greatly* appreciated, if possible.
I am using form checkbox elements in a DataTables row to allow an end-user to check multiple rows, and once submitted, the server (will) delete the appropriate rows from the Database. I am attempting to do this all within an AJAX environment so the page does not need to be refreshed. So upon a successful return from the ajax source, I would like to remove the elements visually from the table.
When the server JSON encodes the data that is passed to DataTables, it assigns each row a checkbox with the row count. So when you begin checking the checkboxes off, they are identified by the row # correctly. Each row number then gets saved to an array and passed to the server for database deletion, and to then the client proceeds with that same array for visual deletion of the rows (shown below):
To visualize this, some sample mock data (simplified):
[code]
NAME AGE ROW# DELETE?
Jill 25 0 X
jack 15 1
john 99 2 X
[/code]
In this example I am deleting row 0, and row 2 from the table display. I do this as follows (again simplified):
[code]
for(var i in rowIDs) {
oTable.fnDeleteRow(rowIDs[i]);
}
[/code]
This issue I am having is that once the first row is deleted, DataTables automatically re-assigns the row numbers before the next iteration. So in the example above, John's row # changes from 2 to 1 as far as DataTables is concerned once the Jill row is deleted. In the next iteration, it attempts to delete row 2, but there is of course, no row 2 anymore.
QUESTION: Given *only* the original row numbering scheme, how can I effectively remove multiple random rows without subsequent iterations failing?
Please note that I am fairly terrible at Javascript, but quite decent with PHP and MySQL. Also note I cannot mess with the database itself, as it would break the normalization requirements there. So I'm left with PHP and JS. Since I've already determined the original (before any deletes) row # in php, I'm guessing the answer lies in JS. Given my knowledge of javascript, code samples would be *greatly* appreciated, if possible.
This discussion has been closed.
Replies
http://datatables.net/beta/1.8/examples/server_side/ids.html
Funnily enough DataTables 1.5 used to deal with rows in the way you are expecting here - with internal indexes not changing, but that proves to have too many problems around it for plug-in devs, so 1.6 changed it and the reindexing is now done.
It needs to be notes that if you are deleting rows but an index, the index is internal to DataTables and thus it can change in between deletes, regardless of external settings (I guess in theory it could change between draws - but it doesn't...).
So I would suggest rather than using the internal index - which I don't think you are actually expecting to be doing from the code above (rowIDs[i]) use the node, which will then work regardless of the internal index.
Is rowIDs an array of node IDs? If so pass in $('#'+rowIDs[i], oTable.fnGetNodes()) to fnDeleteRow.
The documentation for fnDeleteRow ( http://datatables.net/api#fnDeleteRow ) notes that it will take either a node or an internal index. I'd suggest you want the node to make life easy :-)
Allan
I can definitely see where my use case would be the much less accepted one :)
[quote]The documentation for fnDeleteRow ( http://datatables.net/api#fnDeleteRow ) notes that it will take either a node or an internal index. I'd suggest you want the node to make life easy :-)[/quote]
In combination with DT_RowId, that is exactly what I did, and it worked like a charm :) I gotta thank you on a just amazing product, wonderfully written, flexible, and superbly supported. I wonder how you find the time! Obviously we are just beginning to use your solution, but I'm very excited to see how it scales with our application.