Integrating Datatables using Jquery

See more:

Javascript

jQuery

DataTable

Now I want to integrate the plugin Datatables using JQuery
for example I can add this into my code above :

$("table#myTableId").dataTable(); 

If I take the ID of the table from the HTML source and call the dataTable() function, all the mentioned features will be automatically added and they will be fully functional. jQuery DataTables takes the plain HTML table and dynamically injects all elements,


I assign an id to my table I created above so that I can use the ID to call the datatable() later on.


I managed to add the ID but there's no change to my Table when I call the dataTable(). What did I do wrong?

<script type="text/javascript"charset="utf-8">



    d3.text(file, function (datasetText) {


    var rows = d3.csv.parseRows(datasetText);

    var tbl = d3.select("#container")
        .append("table");
     
    tbl.attr("id","tableID");


    // headers
      tbl.append("thead").append("tr")
        .selectAll("th")
        .data(rows[0])
        .enter().append("th")
        .text(function(d) {
            return d;
        });

    // data
    tbl.append("tbody")
        .selectAll("tr").data(rows.slice(1))
        .enter().append("tr")

        .selectAll("td")
        .data(function(d){return d;})
        .enter().append("td")
        .text(function(d){return d;})


     
          $(document).ready(function() {
               $('#tableID').dataTable();
         } );
      
});
    
 

    

	


    </script>