dataTable() function not recognized by browser in jquery.datatables script

Question

I am creating a table in HTML5 using DataTables plugin for jQuery. The table is getting populated with a JSON object that is being received from the back-end web services.

Upon running the web application, the console displays an error saying,

Uncaught TypeError: Object [object Object] has no method 'dataTable'

in Google Chrome and a similar one in Firefox.

I am using the latest scripts for jQuery and jQuery DataTables. I have also tried creating DataTables on static tables and that works fine.

The dataTable() function is not being recognized in the scripts for a dynamically populated table.

The code for DataTables is as follows:

$(document).ready( function () {

    $('#datatable').dataTable( {

        "sScrollY": "200px",
        "bPaginate": false,
        "bProcessing": true

    } );
} );  

datatable is the name of the table being populated.

Any help in solving this issue would be deeply appreciated.

Answer 1

There are a few things you can try to get this working.

1. Be sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger and searching for the file else in the html head section

2. Be sure that you've included the datatale script after you've included jQuery, as it is most certainly dependant upon that.

3. Check whether jQuery is included properly and once only.

4. Watch out for jQuery conflicts. There is some other library which is overridding $, so your code is not working because $ is not an alias for jQuery anymore. You can use jQuery.noConflict() to avoid conflicts with other libraries on the page which use the same variable $.

5. "datatable is the name of the table being populated" <--- wrong table should have an id call 'datatable' according to your code $('#datatable').