$("#example").DataTable() returns empty array

Question

After puzzling over this for a few hours, and looking everywhere for help, I now post here. My problem: the jQuery DataTable plugin's $(selector).DataTable() always returns an empty array.

To create this in minimal form, and using DataTables 1.10.7, applied to the

zero-config example

I find that var tableRef = $("#example").DataTable() returns [].

$("#example")

resolves as you would expect to

<table id="example" class="display dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">…</table>

with

$("#example tr").length   // 12 rows

This old-style API works:

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

[<table id="browserTable" cellpadding="0" cellspacing="0" margin-left="0" border="1" class="display dataTable" aria-describedby="browserTable_info" role="grid" style="width: 1339px;">…</table>]

But the new does not.

I am at a loss. What am I doing wrong? Can anyone help?

The commands shown above - I execute them from the console. No additional error messages appear. — paul shannon
– paul shannon, Commented Jun 24, 2015 at 0:12
can you please create a demo on jsfiddle.net and reproduce this issue ? — Dhiraj
– Dhiraj, Commented Jun 24, 2015 at 2:25
When I run $("#example").DataTable() in the console I get Object { context: Array[1], … }. — Gyrocode.com
– Gyrocode.com, Commented Jun 24, 2015 at 2:26

joakim · Accepted Answer · 2015-06-24 07:31:31Z

1

Use a small-case d to create a new DataTable instance:

var tableRef = $("#example").dataTable({
    // options
});

Large-case D is used to access the API after datatable is instantiated:

$("#example").DataTable();
equals
$("#example").dataTable().api();
or 
tableRef.api();

More information

edited Jun 24, 2015 at 7:31

answered Jun 24, 2015 at 7:26

joakim

1,7621 gold badge14 silver badges23 bronze badges

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

Comments

Cherryishappy · Accepted Answer · 2015-06-24 07:23:46Z

    $(document).ready(function tableload() {

    $('table.display').dataTable( {
        "sScrollY": "300px",
        "sPaginationType": "full_numbers",
        "iDisplayLength": -1,
    //  "aLengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]],
        "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
        "bScrollCollapse": true, 
        "bPaginate": true,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "aTargets": [ -1 ] }
        ]
    } );


    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });

    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

    /* Init the table */
    oTable = $('#example').dataTable( );
} );

HTML

<table align="center" width="700" cellspacing="0" border="0"  class="display" id="example">
                            <thead>


                                  <TR>
                                      <TH>column A</TH>
                                      <TH>column B</TH>
                                      <TH>column C</TH>
                                      <TH>column D</TH>
                                      <TH>column E</TH> 
                                  </TR> 

                                </thead>
                                <tfoot>
                                  <TR>
                                      <TD align="center" valign="bottom"> <B> TOTAL</B> </TD>
                                      <TD></TD>
                                      <TD></TD>
                                      <TD></TD>
                                      <TD></TD>
                                  </TR>  
                                </tfoot>  

                             </table>

Community · Accepted Answer · 2017-05-23 12:31:29Z

0

Many thanks to all those who have offered help. When creating a jsfiddle to demonstrate the problem, I failed to recreate it. Feeling sheepish, I looked a little deeper, and now feel pretty confident that the problem -- the lost (selector).DataTable() value -- is a consequence of obtaining that value in an async callback, a situation (with remedies) described here.

In my case the async code is a websocket handler: I create the DataTable in response to receiving a matrix from my websocket server. Though the solution is not yet clear to me, I realize now that my question as originally posed failed to describe the actual situation, and was thus misleading.

Thanks to all who offered help!

Paul

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 24, 2015 at 12:49

paul shannon

3755 silver badges16 bronze badges

Collectives™ on Stack Overflow

$("#example").DataTable() returns empty array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related