Multiple Tables & fnDeleteRow

efledderman

I am attempting to have multiple dataTables on one page and to have the ability to delete rows on specific tables. However, when using the fnDeleteRow function, the rows are always being deleted from the last table that was generated. I understand that this is because I generate each table with the same script which uses the same variable for each tables initialisation. Since the tables are being generated completely from an external array and are using the same script, how can I go about defining which table to delete the row from? Thanks in advance!

[code]
function dtExecute(dtTarget, dtWidth, dtHeight, dtNumRows){
var dtArray = document.createElement('script');
dtArray.src = "js/" + dtTarget.toLowerCase() + "Array.js" + top.document.referrer;
document.getElementsByTagName("head").item(0).appendChild(dtArray);
var dtTools = document.createElement('script'); // Create new script element
dtTools.src = "js/" + dtTarget.toLowerCase() + "Tools.js" + top.document.referrer;
document.getElementsByTagName("head").item(0).appendChild(dtTools);
var dtHeaderTitle = dtTarget.toLowerCase().replace(/\b[a-z]/g, ucFirst);
$("#dt" + dtHeaderTitle).html("\n" +
" \n" +
" " + dtHeaderTitle + "\n" +
" " + dtHeaderTools + "\n" +
" \n" +
" \n" +
" \n" +
" \n" +
"\n");
$("#dtContainer" + dtHeaderTitle).css("width", dtWidth);
dtTable = $("#dtDataTable" + dtHeaderTitle).dataTable({
"aaData": dtData,
"aoColumns": dtColumns,
"bLengthChange": false,
"iDisplayLength": dtNumRows,
"sScrollY": dtHeight,
"bFilter": false,
"sPaginationType": "full_numbers",
"fnDrawCallback": function(){
cmExecute(dtTarget);
}
});
}
[/code]

[code]
function cmMenuFunctions(cmMenuDeleteTarget){
$(".cmMenuLink").click(function(){
cmMenuDeleteTarget = $(cmMenuDeleteTarget).attr("id");
cmMenuDeleteTarget = cmMenuDeleteTarget.replace(/\D/g,'');
cmMenuDeleteTarget = cmMenuDeleteTarget - 1;
dtTable.fnDeleteRow(cmMenuDeleteTarget);
});
}
[/code]

fbas

1) how are you calling cmMenuFunctions? how is it supposed to be associated with one of the tables?

2) you'll need to keep separate references to your tables (or retrieve a reference to a given table with its id) rather than just use a single dtTable variable.

1 + 2) you could pass in a reference to the correct table as a parameter to cmMenuFunctions()

efledderman

So would something like this be what you are referring to?

$("#tableId").fnDeleteRow(cmMenuDeleteTarget);

fbas

$("#tableId") will just return the JQuery wrapper of the DOM element (and I don't think that will work, but you can try it), but $("#tableId").dataTables() (or $("#tableId").dataTables({bRetrieve: true})) will return the DT instance properly

[code]
$("#tableId").dataTables().fnDeleteRow(cmMenuDeleteTarget); // assuming cmMenuDeleteTarget is a valid row index
[/code]


or if you rewrote your function to need an instance
[code]
function cmMenuFunctions(dTable, cmMenuDeleteTarget){
$(".cmMenuLink").click(function(){
cmMenuDeleteTarget = $(cmMenuDeleteTarget).attr("id");
cmMenuDeleteTarget = cmMenuDeleteTarget.replace(/\D/g,'');
cmMenuDeleteTarget = cmMenuDeleteTarget - 1;
dtTable.fnDeleteRow(cmMenuDeleteTarget);
});
}


// to run the function
cmMenuFunctions($("#tableId").dataTables(), cmMenuDeleteTarget);
[/code]