$("#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, Jun 24 '15 at 00:12
can you please create a demo on http://jsfiddle.net and reproduce this issue ? — Dhiraj, Jun 24 '15 at 02:25
When I run `$("#example").DataTable()` in the console I get `Object { context: Array[1], … }`. — Gyrocode.com, Jun 24 '15 at 02:26

joakim · Answer 1 · 2015-06-24T07:31:31.623

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 '15 at 07:31

answered Jun 24 '15 at 07:26

joakim

1,612
1
14
23

Cherryishappy · Answer 2 · 2015-06-24T07:23:46.363

    $(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>

score 0 · Answer 3 · edited May 23 '17 at 12:31

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

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

3 Answers3