Wie werden DataTables bei dynamischen Zeilen verwendet?

Question

Ich bin neu in dem Konzept von DataTables und ich beziehe mich auf this Beispiel. Der einzige Unterschied in meinem Fall ist, dass meine HTML-Tabelle dynamisch ist. HTML-Code für meine Tabelle ist wie folgt:

<table id="table_id"> 
    <thead> 
    <tr> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     <th>Column 3</th> 
    </tr> 
    </thead> 
</table> 

In meinem Skript-Tag I Zeilen dynamisch hinzufügen zu dieser Tabelle insertRow() Methode verwendet wird und von einer lokalen JSON-Datei Abrufen von Daten wie folgt:

var DemoTable = document.getElementById("table_id"); 
    var DemoRow, DemoCell1, DemoCell2, DemoCell3; 

    $("#table_id").find("tr:gt(0)").remove(); //to keep the first row headings as set in the html code 

for(var i=0; i<DemoData.length; i++) //DemoData contains the fetched json data 
     { 

      var DemoRow = DemoTable.insertRow(); 
      DemoCell1 = DemoRow.insertCell(0); 
      DemoCell2 = DemoRow.insertCell(1); 
      DemoCell3 = DemoRow.insertCell(2); 
      DemoCell1.innerHTML = DemoData[i]["Data1"]; 
      DemoCell2.innerHTML = DemoData[i]["Data2"]; 
      DemoCell3.innerHTML = DemoData[i]["Data3"]; 

     } 

Außerdem habe ich jquery.dataTables.min.js und dataTables.bootstrap.min.js in der gleichen Reihenfolge enthalten. Danach habe ich hinzugefügt:

$(document).ready(function() { 
      $('#table_sub_id').DataTable(); 
    }); 

ich die folgende Fehlermeldung erhalten:

Uncaught TypeError: Cannot read property 'pageButton' of undefined 

Bitte helfen. Thanks :)

Answer 1

Statt dessen Sie diese verwenden können:

$('#table_id').DataTable({ 
    "ajax": "data/objects.txt", 
    "columns": [ 
     { "data": "cell1" }, 
     { "data": "cell2" }, 
     { "data": "cell3" } 
    ] 
});