dataTable() vs. DataTable() - why is there a difference and how do I make them work together?
up vote
48
down vote
favorite
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
add a comment |
up vote
48
down vote
favorite
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
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 callvar table = $("#datatables-example").dataTable();
thenvar 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 callvar info = table.api().page.info()
– danisupr4
Dec 28 '14 at 16:22
add a comment |
up vote
48
down vote
favorite
up vote
48
down vote
favorite
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
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
datatables
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 callvar table = $("#datatables-example").dataTable();
thenvar 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 callvar info = table.api().page.info()
– danisupr4
Dec 28 '14 at 16:22
add a comment |
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 callvar table = $("#datatables-example").dataTable();
thenvar 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 callvar 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
add a comment |
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.
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 asfind()
orattr()
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 usingto$()
if you for some reason think that is more easy.
– davidkonrad
Sep 29 '16 at 13:34
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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.
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 asfind()
orattr()
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 usingto$()
if you for some reason think that is more easy.
– davidkonrad
Sep 29 '16 at 13:34
add a comment |
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.
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 asfind()
orattr()
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 usingto$()
if you for some reason think that is more easy.
– davidkonrad
Sep 29 '16 at 13:34
add a comment |
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.
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.
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 asfind()
orattr()
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 usingto$()
if you for some reason think that is more easy.
– davidkonrad
Sep 29 '16 at 13:34
add a comment |
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 asfind()
orattr()
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 usingto$()
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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();
thenvar 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 callvar info = table.api().page.info()
– danisupr4
Dec 28 '14 at 16:22