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

ooioo · February 16

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 · February 16

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 · February 16

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 · February 16

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 · February 16

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 · February 16

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

Allan

ooioo · February 17

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 · February 17

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 · February 17

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 · February 17

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

Kevin

ooioo · February 17

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 · February 17

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

@allan will need to take a look.

Kevin

Mwhite007 · February 18

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

colin · February 18

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 · February 20

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 · February 20

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 · February 20

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 · February 20

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 · February 20

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 · February 20

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 · February 20

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 · February 21

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 · February 23

@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 · February 24

@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 · February 25

@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 · February 26

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 · February 28

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

allan · February 28

Awesome - thanks for the confirmation.

Allan

nirmal6353 · February 28

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

chiraghapani · April 8

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 · April 8

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

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

Replies

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

Howdy, Stranger!

Categories

DataTables

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

Replies

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

Howdy, Stranger!

Quick Links

Categories

DataTables