Troubleshooting common errors and bugs in DataTables

Here is a listing of some of the more common problems people have with DataTables or browsers.  These are mostly pretty basic, but they happen to us all.  However, if you ask for help with these issues, you might not get a lot of help because you should be able to sort these out yourself.  Before posting to the forum, you should troubleshoot on your own.

I made a lot of these errors myself, so don't feel bad if they happen to you. But learn to recognize them and avoid them.

My program works fine on Chrome and Firefox, but in IE nothing works. 

1. The trailing comma.  In arrays and objects, Chrome and Firefox and now the ECMA specification allow for a trailing comma.  IE will crash if you have an extra comma in your arrays or objects. (I've been told IE 9 now fixes this.)  a = [1,2,3,];
2. console.log().   The console object is not provided by default in IE's Javascript environment so if you're in the habit of adding console.log() debug code you are breaking your app for IE.  Sorry.

My table does not show up, using AJAX source. or Other JSON errors.

• Have you run your JSON through the http://jsonlint.com/ validator?
• make sure special characters are 'escaped', i.e. backslashes: $string_in_json = str_replace('\\', '\\\\', $remarks);

My AJAX source / server side source is valid JSON but DataTables doesn't work.

• It's not enough to just provide valid JSON.  Your JSON object has to have the right object/layout that DataTables expects.  The requirements for the callback in fnServerData are even more important.   
• For a valid AJAX source example see http://www.datatables.net/release-datatables/examples/ajax/sources/arrays.txt or the debugger's network panel on when viewing a working example.  
• For valid server-side return, make sure to conform to this specification: http://www.datatables.net/usage/server-side

Getting an error that .dataTables() is not a function OR .editable is not a function, etc. (I am using panels or popup code to display tables)

• Make sure your libraries are included in the right order.  jquery.js must be included before datatables.js.  editable.js is needed before the datatables.editable.js (but after jquery). Feature plugins should usually be included after datatables.js but before you call your .dataTables() function.
• Are you including jquery.js more than once?  If you are loading data into another panel (unless it's in an iframe or another window) and you include jquery.js (or other libraries) in that code, you could be clobbering the original jquery code AND the API functions that datatables.js  adds to the JQuery object/library.

 JQuery functions are not working.  DOM functions are not working. Object is null.  Reference error.

• Make sure you have a JQuery object, or a DOM object.  There are tips in the JQuery basics blog for telling the difference.
• Make sure your variables have been defined and constructed properly.

DataTables error: wrong number of columns. OR
'k is not defined'.

• Your TABLE element HAS TO have a THEAD element in order for DataTables to work with it.
• You need th same number of columns in the THEAD as you have in your array-source, AJAX-source, or db-source data.  Check your sources.
• Is your source valid JSON as well as the correct format for DataTables?  (see above)

outerHTML is not working.

• outerHTML is not valid Javascript in the spec and not supported on many browsers.

Items are not sorting correctly.

• If you haven't specified an sType, DataTables will try to detect the type. It won't always guess correctly.  Use sType if you have issues.  Or define a type detector routine and add to your DataTables instance.
• DataTables, by default, only supports a few types like date (SOME date formats, not all), number, string, and a special html type for stripping html before sorting.  If you have a $ or currency sign, your currency looks like a string, not a number.  If you have commas or field delimiters in your numbers, they look like strings.  You can install custom sorting routines and new types for type detection; see http://www.datatables.net/plug-ins/sorting and http://www.datatables.net/development/sorting#type_based
• If you added content (like HTML code) using fnRender or a jEditable change and aren't using bUseRendered = false your sort routines will be affected by the HTML code.

I'm using mDataProp and have a null value in my data and DataTables is halting.

• Ok, this one is not your fault.  There was a bug in DataTables up to 1.8.1 that didn't properly detect null in some places.  You can upgrade to 1.8.2+ or you can specify sDefaultContent for any column to avoid this error.  see http://www.datatables.net/ref#sDefaultContent

 RegExp search/sorting/range filter/etc. is not working when I use server side processing.

• This is not a bug. When using server side processing, all processing is done on the server side.  There are ways to make these features work, but they are not DataTables issues.

Extra rows, extra header, extra stuff.

• The way DataTables works to allow scrolling of table body but not the header is to copy the header and footer to other divs and make the original header and footer { display: none }.  If you have items that force the header to display, you can end up with extra headers and footers.