javascript jquery datatables undefined is not a function

Question

I'm following the jquery datatables tutorial for adding child tables to display after a click.

var table = $("#equipment_table").dataTable(
{
     "paging":   false,
     "ordering": false,
     "info":     false
});
$('#equipment_table tbody').on('click', 'td .pickup_button', function(){
    alert("clickee");
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    if(row.child.isShown()){
        //open , close it
        row.child.hide();
        tr.removeClass('shown');
    }else {
        row.child( buildChild(tr.attr('id'))).show();
        tr.addClass('shown');
    }
});

and here's the html button definition in php

    echo '<td> <button class="delivery_button" id="'.$eid.'"> Delivery Status </button> </td>';
    echo '<td> <button class="pickup_button" id="'.$eid.'"> Pickup Status </button> </td>';
    echo '</tr>';
}
echo '</tbody>';

after getting the click listener to work, i get this error

Uncaught TypeError: undefined is not a function 

on var row = table.row(tr); line

Answer 1

It's just a case issue. You should define your variable table like this:

var table = $("#equipment_table").DataTable(
{
  "paging":   false,
  "ordering": false,
  "info":     false
});

Notice how this uses .DataTable() rather than .dataTable()

Here's what it says in the API Docs for DataTables :

It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable() . The former returns a DataTables API instance, while the latter returns a jQuery object.

Since you are getting back a jQuery object rather than an API instance, the method .row() is undefined, and that is what causes the error to be thrown.

Hope that helps.

Answer 2

Notice how this uses .DataTable() rather than .dataTable() and you should use like var tr = $(this).closest('tr'); var row = table.row( tr ); if ( row.child.isShown() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { row.child(format(row.data())).show(); tr.addClass('shown'); } var tr = $(this).closest('tr'); var row = table.row( tr ); if ( row.child.isShown() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { row.child(format(row.data())).show(); tr.addClass('shown'); }