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

Any messages in the console and does it work if you remove everything except the alert()? If it doesn't you should check and post your html instead of the php. — jeroen
– jeroen, Commented Jun 17, 2014 at 1:08
@bloodyKnuckles that was actually the problem, table wasn't set. after i set it tho, the clicking works but the jquery but something is undefined. and i get a error. I will update my question — Pita
– Pita, Commented Jun 17, 2014 at 1:22

jshanley · Accepted Answer · 2014-06-17 02:31:34Z

5

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.

answered Jun 17, 2014 at 2:31

jshanley

9,1382 gold badges39 silver badges45 bronze badges

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

1 Comment

dilettante Over a year ago

Check your version. In case the above answer doesn't work for anyone stumbling on here (it didn't for me), calling the API this way only works with DataTables 1.10.x and up. I was pounding my head against a wall and realized I was on a 1.9.x branch.

Ravi · Accepted Answer · 2014-06-29 06:59:12Z

0

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'); }

answered Jun 29, 2014 at 6:59

Ravi

1

Collectives™ on Stack Overflow

javascript jquery datatables undefined is not a function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related