dataTable() vs. DataTable() - why is there a difference and how do I make them work together?











up vote
48
down vote

favorite
27












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.










share|improve this question
























  • 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, and it seems like you can use the 2 initialisation types together to access a particular version's features.
    – markpsmith
    Aug 8 '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 - datatables.net/examples/basic_init/zero_configuration.html
    – ggutenberg
    Aug 8 '14 at 15:50










  • 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

















up vote
48
down vote

favorite
27












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.










share|improve this question
























  • 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, and it seems like you can use the 2 initialisation types together to access a particular version's features.
    – markpsmith
    Aug 8 '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 - datatables.net/examples/basic_init/zero_configuration.html
    – ggutenberg
    Aug 8 '14 at 15:50










  • 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















up vote
48
down vote

favorite
27









up vote
48
down vote

favorite
27






27





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.










share|improve this question















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.







datatables






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jun 1 '16 at 7:13









davidkonrad

62.6k13133186




62.6k13133186










asked Aug 8 '14 at 15:37









ggutenberg

3,59243040




3,59243040












  • 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, and it seems like you can use the 2 initialisation types together to access a particular version's features.
    – markpsmith
    Aug 8 '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 - datatables.net/examples/basic_init/zero_configuration.html
    – ggutenberg
    Aug 8 '14 at 15:50










  • 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




















  • 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, and it seems like you can use the 2 initialisation types together to access a particular version's features.
    – markpsmith
    Aug 8 '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 - datatables.net/examples/basic_init/zero_configuration.html
    – ggutenberg
    Aug 8 '14 at 15:50










  • 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


















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, and it seems like you can use the 2 initialisation types together to access a particular version's features.
– markpsmith
Aug 8 '14 at 15:47






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, and it seems like you can use the 2 initialisation types together to access a particular version's features.
– markpsmith
Aug 8 '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 - datatables.net/examples/basic_init/zero_configuration.html
– ggutenberg
Aug 8 '14 at 15:50




That's what I thought at first, but the majority of examples on the site use a lower-case 'd', and 1.10.2 - datatables.net/examples/basic_init/zero_configuration.html
– ggutenberg
Aug 8 '14 at 15:50












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






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 Answer
1






active

oldest

votes

















up vote
76
down vote



accepted










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.






share|improve this answer























  • Do they both return a jQuery object though?
    – Triynko
    Sep 28 '16 at 14:57






  • 1




    @Triynko, As stated above, no! See a brief explanation 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













Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f25207147%2fdatatable-vs-datatable-why-is-there-a-difference-and-how-do-i-make-them-w%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
76
down vote



accepted










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.






share|improve this answer























  • Do they both return a jQuery object though?
    – Triynko
    Sep 28 '16 at 14:57






  • 1




    @Triynko, As stated above, no! See a brief explanation 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

















up vote
76
down vote



accepted










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.






share|improve this answer























  • Do they both return a jQuery object though?
    – Triynko
    Sep 28 '16 at 14:57






  • 1




    @Triynko, As stated above, no! See a brief explanation 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















up vote
76
down vote



accepted







up vote
76
down vote



accepted






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.






share|improve this answer














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.







share|improve this answer














share|improve this answer



share|improve this answer








edited Aug 9 '14 at 8:53

























answered Aug 9 '14 at 7:53









davidkonrad

62.6k13133186




62.6k13133186












  • Do they both return a jQuery object though?
    – Triynko
    Sep 28 '16 at 14:57






  • 1




    @Triynko, As stated above, no! See a brief explanation 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




















  • Do they both return a jQuery object though?
    – Triynko
    Sep 28 '16 at 14:57






  • 1




    @Triynko, As stated above, no! See a brief explanation 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


















Do they both return a jQuery object though?
– Triynko
Sep 28 '16 at 14:57




Do they both return a jQuery object though?
– Triynko
Sep 28 '16 at 14:57




1




1




@Triynko, As stated above, no! See a brief explanation 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






@Triynko, As stated above, no! See a brief explanation 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




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f25207147%2fdatatable-vs-datatable-why-is-there-a-difference-and-how-do-i-make-them-w%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

404 Error Contact Form 7 ajax form submitting

How to know if a Active Directory user can login interactively

TypeError: fit_transform() missing 1 required positional argument: 'X'