Sorry the description might not make sense but couldn't think of anything else that did.
My problem is:
I have a dataTable. using server-side processing. The table fills fine.
The first column has a couple of possible links:
Clicking on the play works fine. Its the <li> which where the problem begins.
data = "<button class='btn btn-info btn-sm'><li class='fas fa-play-circle 2x' id='play'>Play </li><li class='fas fa-thumbtack'></li></button><li class='fas fa-plus' data-id="+row[10]+" ></li>";
I have a div on the page where I want to display the table
<div id="AD">
<table id="ADtable" class="display"></table>
<button class="btn btn-sm btn-default" onclick='$("#AD").hide()' >Close</button>
</div>
in my $(document).ready(function () { I have the following:
$("#calltable tbody").on( 'click', 'li', function () {
var data = mytable.row( $(this).parents('tr') ).data();
var callpath = data[15];
url = "includes/getattachedData.php";
data = "callpath="+callpath;
$.ajax({
url : url,
data : data,
type :"POST",
success : function(AD){
console.log("Attached Data "+JSON.parse(AD));
var returnedJson = JSON.parse(AD);
$("#AD").show();
// AD is a div on the page which is hidden on load.
var ADTable = $('#ADtable').DataTable( {
"scrollY": "600",
"scrollX": true,
data: JSON.parse(AD),
columns: [
{ title: "Occurred At" },
{ title: "Event" },
{ title: "Key" },
{ title: "Value" }
]
} );
}
});
});
I want this AD table to populate and display.
I've tried using a modal, which was my preferred method and will probably be implemented again once i solve this issue.
I get an error saying cant re-initialize the table. which makes perfect sense because its in the document.ready.
I tried using ADTable.destroy()
I've even tried
$("#calltable tbody").on( 'click', 'li', function () {
var data = mytable.row( $(this).parents('tr') ).data();
var callpath = data[15];
url = "includes/getattachedData.php";
data = "callpath="+callpath;
$.ajax({
url : url,
data : data,
type :"POST",
success : function(AD){
var returnedJson = JSON.parse(AD);
$("#AD").show();
// *** build a temp table ... then destroy it. Then create new table with new data.
ADTable = $('#ADtable').DataTable( {
"scrollY": "600",
"scrollX": true
} );
ADTable.destroy();
ADTable = $('#ADtable').DataTable( {
"scrollY": "600",
"scrollX": true,
data: JSON.parse(AD),
columns: [
{ title: "Occurred At" },
{ title: "Event" },
{ title: "Key" },
{ title: "Value" }
]
} );
}
});
});
thinking that if the table already exists it would be destroyed and then created.
I'm going round in circles and getting nowhere..
I think i'm missing something really fundamental but i'm getting a mental block at the moment.
as always... any help is greatly appreciated.