How do I create a from click inside another table.

asystemsaus

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.

kthorngren

Its hard to say exactly without seeing the code in action.

Does the ADtable table work the first time but fail on subsequent clicks?

I would recommend using destroy() without initially creating the temp table. The temp table is probably what is generating the reinitialization error in your second example because it already exists.

I would use this instead without creating the temp table:

      $('#ADtable').DataTable().destroy();
      ADTable =   $('#ADtable').DataTable( {
           "scrollY": "600",
           "scrollX": true,
                  data: JSON.parse(AD),
                  columns: [
                      { title: "Occurred At" },
                      { title: "Event" },
                      { title: "Key" },
                      { title: "Value" }
                  ]
                 
              } );

Or you can trying the destroy option. However if you are just changing the data you can use the combo of clear() followed by rows.add().

Kevin

asystemsaus

HI @Kevin, The table shows perfectly the first time. But every subsequent click on the link created the same table, gives the error and shows the same table again. Its not replacing the data . Obviously because it couldn't create a new table its showing me what had already been created.
I'm trying a different approach now.

This now works !!
It seems creating the table div on the fly is the answer.
I'm not going to delve too deeply into why it works. I've archived the working copy and now moving on. Thanks for your help.

 $("#calltable tbody").on( 'click', 'li', function () {
   var data = mytable.row( $(this).parents('tr') ).data();
   var callpath = data[15];
   var callId = data[10];
   console.log(" id = "+data[16]);
   $("#data-id").text(callId);
   $("#callId").text(callId);
   url = "includes/getattachedData.php";
   postdata = "callpath="+callpath;
   var tableDiv = '<table id="AD_" class="display"></table>';
   console.log("Table name = "+tableDiv);
// create the table div in the modal.
   $("#thetable").html(tableDiv); 
   $.ajax({
      url : url,
      data : postdata,
      type :"POST",
      success : function(AD){
      var returnedJson = JSON.parse(AD);
       var   ADTable =   $('#AD_').DataTable( {  
           "scrollY": "800",
           "scrollX": true,
             data : JSON.parse(AD),
           columns: [ 
                { title: "Occurred At" },
                { title: "Event" },
                { title: "Key" },
                { title: "Value" } 
            ]
            });
       console.log("  Id = "+data[10]);
       console.log(" opened table ");
            $("#ADModal").modal("show");
           },
           error : function(returned){
       console.log(" Nothing back ");
               }
            });
   });