Get DataTable object from HTML element

Question

I have a problem where I am trying to access a data table object of a particular HTML element.

I have looked at the docs for JQuery Data Table and am using this example: https://datatables.net/reference/option/retrieve

This however, does not work. Here is my code in my global file main.js:

function initTable () {
    return $(".dynamic-table").DataTable({
        "aaSorting": [],
        "scrollY": 530,
        "scrollCollapse": true,
        "lengthMenu": [
            [100, 400, 1000, 5000, -1],
            [100, 400, 1000, 5000, "All"]
        ],
        "retrieve": true
    });
}

$(document).ready(function() {
    initTable();
});

Now inside of my other file I attempt to retrieve the object:

$(document).ready(function() {
    var table = initTable();
});

This does not retrieve the object but instead it initializes the object again and causes the table to render twice.

I have also tried:

$(document).ready(function() {
    var table = $(".dynamic-wide-table").DataTable();
});

because I have read some threads saying that a blank initialization will just retrieve the object.

Neither of these solutions work. If anybody knows what I am doing wrong I would greatly appreciate it! Thanks.

Why do you use "DataTable" instead of "dataTable"? they are not the same, the former instantiates a table, and returns a datatable api reference, while the latter simply instantiates a table — elad.chen
– elad.chen, Commented Jul 20, 2016 at 15:38
I'm not sure. Ever since I have implemented datatables I have used DataTable. What is the difference? — user4780686
– user4780686, Commented Jul 20, 2016 at 15:39
@elad.chen it's actualy dataTable not DataTable or datatable. Look at the example, it is case sensitive. — Adjit
– Adjit, Commented Jul 20, 2016 at 15:39
@Adjit There are two apis one can use when using data tables, one is $.fn.DataTable and $.fn.dataTable They are not the same. — elad.chen
– elad.chen, Commented Jul 20, 2016 at 15:41
I would think something else could also be interfering here or your code/screenshot are not in synch as the second set of table filtering options shows as 10 and the code being called does not have 10 as an option in lengthMenu — Chris Hopkins
– Chris Hopkins, Commented Jul 21, 2016 at 12:58

noetix · Accepted Answer · 2019-06-11 13:03:53Z

16

$(".dynamic-wide-table").DataTable();

Referencing like the above is the correct way to obtain a Data Tables API reference.

You can test this in the datatables examples https://datatables.net/examples/ajax/objects.html and then enter the below JS into your console. You will see it does not redraw the table or create a second table.

  var table = $('#example').DataTable()

Also see the API docs https://datatables.net/reference/api/ that clearly state this method.

Using the table object you can do any datatable operation.

edited Jun 11, 2019 at 13:03

noetix

4,9533 gold badges29 silver badges48 bronze badges

answered Jul 21, 2016 at 13:28

Chris Hopkins

3344 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Imran · Accepted Answer · 2017-08-28 07:36:02Z

1

You may use extend ..

   $.extend( true, $.fn.dataTable.defaults, {
            "bFilter": true,

        } );

answered Aug 28, 2017 at 7:36

Imran

2,1191 gold badge12 silver badges8 bronze badges

1 Comment

Hicham O'Sfh Over a year ago

Would you please develop and explain clearly your answer. Thanks..

Hicham O'Sfh · Accepted Answer · 2020-12-29 15:14:59Z

1

For getting the instance when you have a selector ("#table_id" or ".display-tables" for example):

var instance = new $.fn.dataTable.Api( 'selector' );

DataTable.net docs

answered Dec 29, 2020 at 15:14

Hicham O'Sfh

84912 silver badges14 bronze badges

Collectives™ on Stack Overflow

Get DataTable object from HTML element

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related