migrating from 1.13.10 to 2.0.0, errors : DataTable is not defined

ooioo

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

allan

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

kthorngren

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

allan

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

ooioo

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.

allan

Let us know what you find - I'm most curious to get to the bottom of this.

Allan

ooioo

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.

kthorngren

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 in DataTables-2.0.0 is just datatables without any of the extensions.

Make sure to load the datatables.js and datatables.css from the root of your download.

Kevin

cyrcle

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.

kthorngren

i tried datatables.min.js in my downloaded example and it works also. Maybe a browser cache issue.

Kevin

ooioo

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...

kthorngren

Same issue with datatables.min.js is noted in this thread.

@allan will need to take a look.

Kevin

Mwhite007

same here, works with datatables.js but not datatables.min.js

colin

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

ooioo

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 :

Uncaught TypeError: $(...).DataTable is not a function
    <anonymous> http://wikipanda.free.fr/datatables/dt2minerror/:11
    EventListener.handleEvent* http://wikipanda.free.fr/datatables/dt2minerror/:10

Pierre

jzohrab

Same issue as others. My app used datatables.min.js and it worked prior to upgrade. After updating, the git diff is

- *   DataTables 1.13.7, Buttons 2.4.2, HTML5 export 2.4.2
+ *   DataTables 2.0.0, Buttons 3.0.0, HTML5 export 3.0.0

and the error thrown is

    datatables.min.js:21 Uncaught TypeError: Cannot read properties of undefined (reading 'ext')
    at datatables.min.js:21:505
    at datatables.min.js:21:416
    at datatables.min.js:21:442

Thank you for the great library!

allan

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

ooioo

Hi, I still have an error with this configuration :

* This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs5/pdfmake-0.2.7/dt-2.0.0/b-3.0.0/b-colvis-3.0.0/b-html5-3.0.0/b-print-3.0.0/rg-1.5.0/rr-1.5.0/sl-2.0.0
 *
 * Included libraries:
 *   pdfmake 0.2.7, DataTables 2.0.0, Buttons 3.0.0, Column visibility 3.0.0, HTML5 export 3.0.0, Print view 3.0.0, RowGroup 1.5.0, RowReorder 1.5.0, Select 2.0.0

and the error is :

Uncaught TypeError: n is undefined
    <anonymous> http://localhost:8080/ruches/js/datatables-2.0.0/datatables.min.js:27
    <anonymous> http://localhost:8080/ruches/js/datatables-2.0.0/datatables.min.js:27
    <anonymous> http://localhost:8080/ruches/js/datatables-2.0.0/datatables.min.js:27
datatables.min.js:27:512
Uncaught TypeError: $.fn.dataTable is undefined
    <anonymous> http://localhost:8080/ruches/js/ruches-41/include.js:14
include.js:14:17
Uncaught ReferenceError: DataTable is not defined
    <anonymous> http://localhost:8080/ruches/js/ruches-41/essaimsListe.js:5

allan

Could you try it again now please? Apologies, I hadn't considered the third party files such as pdfmake when cleaning the cache.

Allan

ooioo

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.

allan

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

jzohrab

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.

nirmal6353

@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?

allan

@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

nirmal6353

@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?

allan

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

jzohrab

With 2.0.1 out, I believe this has been fixed. At least for minified files everything works as expected. Thank you @allan.

allan

Awesome - thanks for the confirmation.

Allan

nirmal6353

@allan This issue has been fixed for me with 2.0.1 (bower updates), Thanks!

chiraghapani

datatables.min.js:34 Uncaught TypeError: Cannot read properties of null (reading 'url')

<link href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.0.3/af-2.7.0/b-3.0.1/b-html5-3.0.1/fc-5.0.0/fh-4.0.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/datatables.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.0.3/af-2.7.0/b-3.0.1/b-html5-3.0.1/fc-5.0.0/fh-4.0.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/datatables.min.js"></script>

var tbl = $('#dtTransaction').DataTable({
        "serverSide": true,
        "processing": true,
        "orderMulti": false,
        "filter": true,
        "scrollCollapse": true,
        "responsive": true,
        "ordering": true,
        "scrollY": "48vh",
        "scrollCollapse": true,
        "sAjaxSource": '@Url.Action("GetTransaction", "Transaction")',
        "iDisplayLength": 10,
        "fixedHeader": true,
        "dataSrc": '',
        "language": {
            "infoFiltered": ""
        },
        "fnServerData": function (sSource, data, fnCallback) {
            $.ajax({
                "dataType": "json",
                "type": "POST",
                "url": sSource,
                "data": data,
                "success": fnCallback
            });
        },
        "columns": [
            {
                "sTitle": "@Localizer["BillNo"]", "className": "", render: function (data, type, row, meta) {
                    return row.billNo
                }
            },
            {
                "sTitle": "@Localizer["Name"]", "className": "", render: function (data, type, row, meta) {
                    return row.name
                }
            },
        ],
        fnRowCallback: function (Row, Data, iDisplayIndex, iDisplayIndexFull) {

            return Row;
        },
        "initComplete": function () {
        }
    });

colin

@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.