CODEWITHSUNDEEP
javascriptjqueryd3.jsdatatables
RH1922
RH1922

Reputation: 45

Javascript/JQuery for Datatables

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?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    table {
        border-collapse: collapse;
        border: 2px black solid;
        font: 12px sans-serif;
    }

    td {
        border: 1px black solid;
        padding: 5px;
    }
</style>
</head>
<body>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"     href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>

<script src="http://d3js.org/d3.v3.min.js"></script> 
<!-- <script src="d3.min.js"></script>-->

<script type="text/javascript"charset="utf-8">
    d3.text("test.csv", function(data) {
        var parsedCSV = d3.csv.parseRows(data);

        var container = d3.select("body")
         .append("table")
         .attr("id", "custom_id")

            .selectAll("tr")
                .data(parsedCSV).enter()
                .append("tr")

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


    });

$("#custom_id").dataTable();


</script>
</body>
<html>

Upvotes: 0

Views: 227

Answers (1)

Imperative
Imperative

Reputation: 3183

Assign the id as you would assign any other attribute:

var container = d3.select("body")
    .append("table")
    .attr('id', 'custom_id');

Which leads to $('#custom_id').dataTable();

Upvotes: 1

Related Questions