63

The vast majority of the documentation for this plugin indicates that you initialize it with

$('#example').dataTable();

However http://www.datatables.net/examples/api/multi_filter_select.html initializes using

$('#example').DataTable();

The resultant objects differ quite a lot, and the example URL above doesn't work when I initialize with a lower-case 'D', however pretty much everything else requires the lower-case 'D' initialization.

Can someone please explain to me why there's a difference, and how to make the two play nice together? Essentially I need the multi-filter-select functionality, but also need to tack on some other calls / plugins, which don't seem to like the upper-case 'D' initialization.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
ggutenberg
  • 6,880
  • 8
  • 39
  • 48
  • My understanding was that new the newer version (1.10) uses DataTable and the older versions use dataTable. [http://www.datatables.net/new/1.10](http://www.datatables.net/new/1.10), and it seems like you can use the 2 initialisation types together to access a particular version's features. – markpsmith Aug 08 '14 at 15:47
  • That's what I thought at first, but the majority of examples on the site use a lower-case 'd', and 1.10.2 - http://datatables.net/examples/basic_init/zero_configuration.html – ggutenberg Aug 08 '14 at 15:50
  • 1
    I experienced the same thing when trying to call `var table = $("#datatables-example").dataTable();` then `var info = table.page.info()`. It didn't work, because `.page.info()` only works when we call `.Datatable()`. As @davidkonrad answered, it works with lowercase 'datatables' when I call `var info = table.api().page.info()` – danisupr4 Dec 28 '14 at 16:22

1 Answers1

101

Basically, the two constructurs return different objects.


dataTable constructor

var table = $(<selector>).dataTable()

dataTable is the oldschool dataTables constructur, which returns a jQuery object. This jQuery object is enriched with a set of API methods in hungarian notation format, such as fnFilter, fnDeleteRow and so on. See a complete list of API methods here. Examples :

table.fnDeleteRow(0); 
table.fnAddData(['E', 'F']);

dataTable is supported by all 1.9.x / 1.10.x versions.


DataTable constructor

var table = $(<selector>).DataTable()

The DataTable constructor was introduced in 1.10.x, and returns a huge API object with full read/write access to pages, rows, cells and more, see manual. Example equivalences :

table.row(0).remove();
table.row.add(['E', 'F']).draw();

Combining dataTable and DataTable

If you maintain old code, or for some reason need to use the oldschool dataTable constructor, but still needs to use the new API, the jQuery object is extended (from 1.10.0) with a .api() method that returns the new API. Example equivalences :

var table = $('#example').dataTable();
table.api().row(0).remove();
table.api().row.add(['E', 'F']).draw();

The old API like table.fnDeleteRow(0) still works. So to your concern :

Essentially I need the multi-filter-select functionality, but also need to tack on some other calls / plugins, which don't seem to like the upper-case 'D' initialization.

As you see, you can do both! Initialize dataTables the old way, and use .api() when you need access to the new API.


Why is so many official examples using dataTable()?

Well, you do not need to use the DataTable constructor. If you dont use the new API, there is no reason for using the DataTable constructur. The oldschool dataTable constructor is not deprecated. DataTables is mostly one mans work. It is a huge task to maintain and develop and obviously very time consuming to maintain a huge website with forum, manuals, tons of examples and so on. This is only a guess, but I assume Allan Jardine by now only have changed dataTable to DataTable where it is actually needed, simply bacause he cant do it all in one step.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Do they both return a jQuery object though? – Triynko Sep 28 '16 at 14:57
  • 2
    @Triynko, As stated above, **no**! See a [brief explanation](http://stackoverflow.com/questions/6445180/what-is-a-jquery-object) for the difference. Or, as a thumb of rule - if you can work on X using specific jQuery methods such as `find()` or `attr()` then you have a jQuery object. `DataTable()` return a javascript object literal which not is a jQuery object, but it still offer methods to convert what you are working on into a jQuery object by using `to$()` if you for some reason think that is more easy. – davidkonrad Sep 29 '16 at 13:34
  • what if i need to change language? how would i do that? I am using DataTable constructor. – Mubin Jul 03 '20 at 12:34
  • @Mubin, you must recreate the DataTable with the new language setting. In prior to that, you will need to have instantiated the DataTable with `destroy: true` ... – davidkonrad Jul 03 '20 at 13:28
  • @davidkonrad I my case I need to change the language dynamically. Destroying it will not help me. – Mubin Jul 04 '20 at 14:46
  • @Mubin, but this is your only option. You must recreate the DataTable with the new language setting. Therefore you need `destroy: true` to be set initially. – davidkonrad Jul 08 '20 at 16:05