migrating from 1.13.10 to 2.0.0, errors : DataTable is not defined
migrating from 1.13.10 to 2.0.0, errors : DataTable is not defined
ooioo
Posts: 23Questions: 4Answers: 0
In firefox console : Uncaught ReferenceError: DataTable is not defined
and this error is on "new Datable('#xxx', ...
for example :
<script th:inline="javascript">
/* globals DataTable */
const buttTxtPrint = /*[[#{buttontextprint}]]*/ null;
const buttTxtCol = /*[[#{buttontextcol}]]*/ null;
const Personnes = /*[[#{Personnes}]]*/ null;
document.addEventListener('DOMContentLoaded', () => {
new DataTable('#personnes', {
dom: 'Blftip',
scrollX: true,
buttons: [
'csv',
{
extend: 'pdf', exportOptions: {columns: ':visible'},
action: function (e, dt, node, config) {
config.title = Personnes + ' ' + (new Date()).toLocaleDateString();
const inputSearch = this.search();
if (inputSearch.length !== 0) {
config.title += ' <' + inputSearch + '>';
}
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, node, config);
}
},
{extend: 'print', text: buttTxtPrint},
{extend: 'colvis', text: buttTxtCol}
]
});
});
</script>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Replies
Hi,
Are you able to show me how you are including DataTables, or even better, give me a link to a test case showing the issue please? Here is a little example showing it working.
Allan
I placed your code snippet in this test case and it works:
https://live.datatables.net/xobifeyo/1/edit
Possibly the Datatable's library files aren't loading in the correct order or at all. Maybe you need to clear the browser's cache. To help debug we will need to see the problem. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thank you for editing your post and adding the code example.
As Kevin says, I think we need a test case showing the error to be able to identify what is going wrong. The test cases from both Kevin and myself show it working, so there is something we are missing.
Allan
Thank you a lot for your quick responses, I was hoping that i missed a new configuration. I need to do further investigations in my code to find my mistake !
Pierre.
Let us know what you find - I'm most curious to get to the bottom of this.
Allan
Hi, I am using https://www.datatables.net/download/ with "Download" method in step 3 to copy datatables.min.js and datatables.min.css in my resource/static/js/datatables-2.0.0.
I just tried to download these files using the "CDN" method in step 3 and I have no error, Datatables is loaded. Maybe there is a problem with the js file generated by "Download" in step 3 ?
Pierre.
I just downloaded datatables using the Download Builder and it works perfectly.
When using the Download Builder the root of the zip file contains datatables.js, etc which contain all to the other extension selected on one file. You may need to load that instead. You can open the file in a text editor to see what is contained within the file.
The
datatables.js
found inDataTables-2.0.0
is just datatables without any of the extensions.Make sure to load the
datatables.js
anddatatables.css
from the root of your download.Kevin
Hello, same problem for me when I am using https://www.datatables.net/download/ with "Download" method in step 3 to copy datatables.min.js and datatables.min.css in my resource/static/js/datatables-2.0.0.
I have :
TypeError: $('#myTable').DataTable is not a function. (In '$('#myTable').DataTable()', '$('#myTable').DataTable' is undefined)
But if I use datatables.js instead of datatables.min.js, it works without error!
I use files from the root of my download.
i tried datatables.min.js in my downloaded example and it works also. Maybe a browser cache issue.
Kevin
I also tried like "cyrcle" datatables.js instead of datatables.min.js, it also works without error!
I tried without any extension, same error.
Hu, hu...
Same issue with datatables.min.js is noted in this thread.
@allan will need to take a look.
Kevin
same here, works with datatables.js but not datatables.min.js
Ah, I've got it - the error happens when the source files aren't concatenated (see here); if they are contatenated (with the same options in the download manager), then all is good.
Allan's currently fixing a hole in his wall. Provided he doesn't accidentally cut any wires, I'm sure he'll be on this tomorrow
Colin
Hi, I have tried a test case here :
http://wikipanda.free.fr/datatables/dt2minerror/
with just jquery 3.7.1 min.js, datatables 2.0.0 min.js and min.css downloaded from
"https://www.datatables.net/download/" with default options and in step 3 "Download".
The error in Firefox is :
Pierre
Same issue as others. My app used datatables.min.js and it worked prior to upgrade. After updating, the git diff is
and the error thrown is
Thank you for the great library!
Hi all,
Apologies for this error in the download builder! I made a mistake in updating the database for the release - it isn't an error in DataTables, but specifically in the download builder.
I've just fixed it and the download option should work as expected now.
If you do encounter an issue still (you shouldn't, but just in case...) could you let me know what software you selected on the download page, what options selected at the bottom of the page and the method used (e.g. Download, npm, etc).
Regards,
Allan
Hi, I still have an error with this configuration :
and the error is :
Could you try it again now please? Apologies, I hadn't considered the third party files such as pdfmake when cleaning the cache.
Allan
Yes it works, thanks a lot !
I'll have a look at the new Layout option, because my "dom" positions of buttons, pagination and search is a bit changed. But that's the fun !
Pierre.
Yes, the CSS included in DataTables doesn't position the elements for the
dom
property any more. It could be done, but it can't be on the distribution since it would clash with layout.Allan
Thank you very much @allan , this works out of the box now with datatables.min.js, downloaded from https://datatables.net/download/#dt/dt-2.0.0/b-3.0.0/b-html5-3.0.0. (included libraries DataTables 2.0.0, Buttons 3.0.0, HTML5 export 3.0.0).
Much appreciated, thank you! This is a great library.
@allan Even I am having the issue when migrated from 1.13.10 to 2.0.0, I am using gulp build and bower to get latest data tables from git. Can you please help?
@nirmal6353 I certainly can. Please link to a git repo showing the issue, or give me exact instructions on how to recreate the issue, so I can identify the issue and resolve it.
Allan
@allan I think I found something. When I use bower to install datatables 2.0.0, in bower.json, I see " "main": [
"js/jquery.dataTables.js"
]," (
)
The filename with "jquery.dataTables.js" exists till 1.13.10 but not in 2.0.0, so I could not load datatables which is giving "cannot read properties of undefined" ($.fn.DataTable is null in my case) error.
Is it something needs to be updated from your side or am I missing something?
No, you are 100% correct, that is my error - apologies. I hadn't updated Bower or Nuget for the changed file name. I've committed that change now and it will be part of 2.0.1 which I'm aiming to release tomorrow.
Allan
With 2.0.1 out, I believe this has been fixed. At least for minified files everything works as expected. Thank you @allan.
Awesome - thanks for the confirmation.
Allan
@allan This issue has been fixed for me with 2.0.1 (bower updates), Thanks!
datatables.min.js:34 Uncaught TypeError: Cannot read properties of null (reading 'url')
@chiraghapani This is a duplicate of your other post here, https://datatables.net/forums/discussion/78688/migrating-from-1-10-21-to-2-0-3-error#latest, please don't post same question twice. Let's use that other thread to progress this.