Multiple Datatables in same page (row details)

FilipeAzevedo

Hi,

I'm using datatables to a project and i can't find a solution to what i want.
I have 2 datatables in same page, but i want to make operations in each of them separately and i can't.

When i have the second table opened i cant make any operations in the first because the "oTable" always detect me the second.
Here is the code sample:

[code]
var table2 = $('#myLeadTable').dataTable({ "bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'AjaxDataProviderLeads',
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
/* Append the read_only class to Completed rows */
$('td:eq(9)', nRow).addClass("read_only");
return nRow;
},
"aoColumns": [
{ "sName": "id_lead" },
{ "sName": "description" },
{ "sName": "id_client",
"bSearchable": false,
"bSortable": false,
"bVisible": false
},
{ "sName": "client_name" },
{ "sName": "state" },
{ "sName": "value" },
{ "sName": "fin_date" },
{ "sName": "type" },
{ "sName": "opportunity" },
{ "sName": "probability" },
{ "sName": "created" },
{ "sName": "details" }
]

}).makeEditable({
sUpdateURL: "UpdateData11",
sAddURL: "AddData11",
sDeleteURL: "DeleteData11",
sAddNewRowFormId: "formAddNewRow",
sAddNewRowButtonId: "btnAddNewLead",
sDeleteRowButtonId: "btnDeleteRow"
});

table2.on('click', "tbody tr td img", function (event) {

if ($(event.target.parentNode.parentNode).hasClass("row_selected")) {
$(event.target.parentNode.parentNode).removeClass("row_selected");
$(event.target.parentNode).removeClass("row_selected");
$("#btnDeleteRow").attr("disabled", "true");
} else {
if (table2.fnSettings() != null)
$(table2.fnSettings().aoData).each(function () {
$(this.nTr).removeClass("row_selected");
});
$(event.target.parentNode.parentNode).addClass("row_selected");
$(event.target.parentNode).removeClass("row_selected");
$("#btnDeleteRow").attr("disabled", "true");
}
var id2 = $("#myLeadTable tbody").find(".row_selected").closest('tr').attr('id');

$.ajax({ 'url': 'ColocaIDLead',
'data': 'pid=' + id2
});

var nTr = $(this).parents('tr')[0]; //$(event.target.parentNode).parents('tr')[0];

if (table2.fnIsOpen(nTr)) {
/* This row is already open - close it */
$(str).html("");
table2.fnClose(nTr);
window.location.reload();
}
else {
/* Open this row */
if (typeof openTr == "undefined") {
$(str).html("");
table2.fnOpen(nTr, fnFormatDetails(table2, nTr), 'details');
openTr = nTr;
table3 = jQuery("#myDocuments").dataTable({ "bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'AjaxDataProviderDocumentsFromLeads',
"bAutoWidth": false,
"aoColumns": [
{ "sName": "id_doc",
"bSearchable": false,
"bSortable": false,
"bVisible": false
},
{ "sName": "id_project",
"bSearchable": false,
"bSortable": false,
"bVisible": false
},
{ "sName": "type" },
{ "sName": "link",
"bSearchable": false,
"bSortable": false,
"bVisible": false
},
{ "sName": "description" },
{ "fnRender": function (oObj) {
return 'download' + "    " + 'delete';
}
}
]

}).makeEditable({
sUpdateURL: "UpdateData10",
sAddURL: "AddData10",
sDeleteURL: "DeleteData10",
sAddNewRowFormId: "formAddNewDoc",
sAddNewRowButtonId: "btnAddDocument",
sDeleteRowButtonId: "btnDeleteRow"
});
}

[/code]