CODEWITHSUNDEEP
javascriptjquerydatatables
paul shannon
paul shannon

Reputation: 375

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

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?

Upvotes: 1

Views: 1811

Answers (3)

paul shannon
paul shannon

Reputation: 375

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

Upvotes: 0

joakim
joakim

Reputation: 1752

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

Upvotes: 1

Cherryishappy
Cherryishappy

Reputation: 160

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

Upvotes: 0

Related Questions