Retrieve dataTable object of element

Question

I am trying to get an object of a jQuery Data Table using JQuery. I am using this thread to accomplish this:

https://datatables.net/forums/discussion/2913/how-to-get-the-otable-datatable-object-from-the-tables-id

For some reason this does not work. When I call $('.dynamic-wide-table').dataTable(); it causes my table to initialize AGAIN and make the table render twice, like so:

According to the link posted above it should NOT be doing that, but instead just fetch the object.

Here is my code:

main.js (loaded into HTML head of every page)

$(document).ready(function() {
    $(".dynamic-wide-table").dataTable({
        "aaSorting": [],
        "scrollX": true,
        "scrollY": 530,
        "scrollCollapse": true,
        "lengthMenu": [
            [100, 400, 1000, 5000, -1],
            [100, 400, 1000, 5000, "All"]
        ],
        "retrieve": true
    });
});

get object:

$(document).ready(function() {
    $('.dynamic-wide-table').dataTable();
});

Answer 1

Following the comments:

You wont be able to get the single tables object because each element with that class will have it's own dataTable object.

You could loop through the classes and retrieve each individual one. In order to get a single elements dataTable object you will need to know which table element it is that you need the object from:

$(document).ready(function() {
    $('.dynamic-wide-table').each(function(i){
        console.log('table no. ' + i );
        // Should print the dataTable object for each element to the console
        console.log($(this).dataTable());
    });
});

The ideal thing to do would be to give each individual table an id, then retrieve the dataTable object with the id:

$('#tableId').dataTable();

Answer 2

Mmm I don't think you need to set both..?

If you remove the get object code it should stop firing twice.

You are already doing this in main.js , but loading options at the same time.