Wie konvertiert man eine dynamische Tabelle in eine Jquery Datentabelle?

Question

Ich erstelle dynamisch eine HTML-Tabelle von json data. Ich möchte dann diese Tabelle in eine Datentabelle konvertieren. Aber wenn ich versuche, dies zu tun Ich erhalte einen Fehler, der lautet: Uncaught TypeError: Cannot read property 'mData' of undefined

Mein jquery ist:

$(document).ready(function() { 
    $('#action-button').click(function() { 
       $.ajax({ 
        url: 'https://api.myjson.com/bins/1oaye', 
        data: { 
         format: 'json' 
        }, 
        error: function() { 
         $('#info').html('<p>An error has occurred</p>'); 
        }, 
        dataType: 'json', 
        success: function(data) { 
         // EXTRACT VALUE FOR HTML HEADER. 
         var col = []; 
         for (var i = 0; i < data.length; i++) { 
          for (var key in data[i]) { 
           if (col.indexOf(key) === -1) { 
            col.push(key); 
           } 
          } 
         } 

         // CREATE DYNAMIC TABLE. 
         var table = document.createElement("table"); 


         // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. 

         var tr = table.insertRow(-1);     // TABLE ROW. 

         for (var i = 0; i < col.length; i++) { 
          var th = document.createElement("th");  // TABLE HEADER. 
          th.innerHTML = col[i]; 
          tr.appendChild(th); 
         } 

         // ADD JSON DATA TO THE TABLE AS ROWS. 
         for (var i = 0; i < data.length; i++) { 

          tr = table.insertRow(-1); 

          for (var j = 0; j < col.length; j++) { 
           var tabCell = tr.insertCell(-1); 
           tabCell.innerHTML = data[i][col[j]]; 
          } 
         } 

         // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
         var divContainer = document.getElementById("showData"); 
         divContainer.innerHTML = ""; 
         divContainer.appendChild(table); 

         // convert it to a data table 
         table.setAttribute("id", "example"); 
         $('#example').DataTable(); 

        }, 
        type: 'GET' 
       }); 
      }); 
     }); 

Wie kann ich erstellen oder eine dynamische Tabelle von json zu einer Datentabelle konvertieren?

JSFiddle showing the issue

Answer 1

mit nur einem kurzen Blick auf dem Datatable-Code und es sieht aus wie der wahrscheinliche Grund ist, dass Sie nicht die <th> in einem <thead> Abschnitt zugewiesen sind. Momentan sitzen sie innerhalb <tbody>.

Hier ist die aktualisierte Geige ... https://jsfiddle.net/8some9a0/1/