fnDeleteRow() deletes wrong row after fnAddData()
fnDeleteRow() deletes wrong row after fnAddData()
Nighteyez07
Posts: 1Questions: 0Answers: 0
I've currently run into an issue where if I add Rows to my table using fnAddData() and then a user happens to select one of the newly added rows to delete. Instead of deleting that row, it will delete the next row that had not been added. If I refresh the page and go to delete the same row (without doing anything causing fnAddData() to fire) then it deletes without issue. I'm currently running dataTables 1.7.5. I'll post the code that I can, but certain pieces have to be removed due to blah blah blah. I've tried fnDeleteRow(row) using just the index of the row and tried using fnDeleteRow(row, null, true) and it's the same behavior. Any help or advice would be appreciated.
This block are adding new rows if they don't already exist within the table
[code]
function reloadExistingFiles(){
$.post(
"*************",
{*****: *****},
function(res){
var s = "";
if(res.DATA.length > 0){
var dataArr = $('#filelist').dataTable().fnGetData();
var newDataArr = new Array();
for (var i = 0, arrLen = dataArr.length; i < arrLen; i++) {
newDataArr.push(dataArr[i][0].replace(/<[^>]+>/ig, ""));//clean up the value and put it in a new 1D array
}
for (var i = 0, resLen = res.DATA.length; i < resLen; i++) {
var extArr = res.DATA[i][0].split(".");
var extHtml = "";
if(extArr.length > 1){
extHtml = extArr[extArr.length-1].toUpperCase();
} else {
extHtml = " ";
}
recExists = false;
for (var x = 0, arrLen = newDataArr.length; x < arrLen; x++){
if (res.DATA[i][0] == newDataArr[x]) {
//we have a match, no reason to loop this one again
newDataArr.splice(x, 1);
recExists = true;
break;
}
}
if (!recExists) {
$('#filelist').dataTable().fnAddData([
"" + res.DATA[i][0] + "",
extHtml,
"Delete"]);
}
}
$('#filelist').dataTable().fnDraw();
$("a.delete_file").unbind();//prevent double popups
deleteFiles();
}
}, "json");
}[/code]
This is the block that handles deleting the row. Some code has been removed which calls the server to remove the record from a table and filesystem.
[code]//binds a delete function to the Delete link on page
function deleteFiles(){
$("a.delete_file").click(function(e){
var filename = $(this).parent().siblings("td:first").children("a").html();
var row = $(this).parent().parent().parent().children().index($(this).parent().parent());//get the row number that was clicked
e.preventDefault();//stop the page from refreshing
//ask the user if they are sure they want to do this
var result = confirm("Are you sure you want to delete the following file?\n"+filename);
if(result){
//delete the row from the datatable
$('#filelist').dataTable().fnDeleteRow(row, null, true);
//display message
$("#success").unbind();
$("#success").show().html(filename + " has been deleted").delay(3000).hide(333);
}
});
} // end deleteFiles() function[/code]
This block are adding new rows if they don't already exist within the table
[code]
function reloadExistingFiles(){
$.post(
"*************",
{*****: *****},
function(res){
var s = "";
if(res.DATA.length > 0){
var dataArr = $('#filelist').dataTable().fnGetData();
var newDataArr = new Array();
for (var i = 0, arrLen = dataArr.length; i < arrLen; i++) {
newDataArr.push(dataArr[i][0].replace(/<[^>]+>/ig, ""));//clean up the value and put it in a new 1D array
}
for (var i = 0, resLen = res.DATA.length; i < resLen; i++) {
var extArr = res.DATA[i][0].split(".");
var extHtml = "";
if(extArr.length > 1){
extHtml = extArr[extArr.length-1].toUpperCase();
} else {
extHtml = " ";
}
recExists = false;
for (var x = 0, arrLen = newDataArr.length; x < arrLen; x++){
if (res.DATA[i][0] == newDataArr[x]) {
//we have a match, no reason to loop this one again
newDataArr.splice(x, 1);
recExists = true;
break;
}
}
if (!recExists) {
$('#filelist').dataTable().fnAddData([
"" + res.DATA[i][0] + "",
extHtml,
"Delete"]);
}
}
$('#filelist').dataTable().fnDraw();
$("a.delete_file").unbind();//prevent double popups
deleteFiles();
}
}, "json");
}[/code]
This is the block that handles deleting the row. Some code has been removed which calls the server to remove the record from a table and filesystem.
[code]//binds a delete function to the Delete link on page
function deleteFiles(){
$("a.delete_file").click(function(e){
var filename = $(this).parent().siblings("td:first").children("a").html();
var row = $(this).parent().parent().parent().children().index($(this).parent().parent());//get the row number that was clicked
e.preventDefault();//stop the page from refreshing
//ask the user if they are sure they want to do this
var result = confirm("Are you sure you want to delete the following file?\n"+filename);
if(result){
//delete the row from the datatable
$('#filelist').dataTable().fnDeleteRow(row, null, true);
//display message
$("#success").unbind();
$("#success").show().html(filename + " has been deleted").delay(3000).hide(333);
}
});
} // end deleteFiles() function[/code]
This discussion has been closed.