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

ooiooooioo Posts: 23Questions: 4Answers: 0
edited February 16 in Free community support

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

«1

Replies

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943

    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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin
    edited 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

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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.

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

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

    Allan

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943
    edited 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

  • cyrclecyrcle Posts: 1Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943

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

    Kevin

  • ooiooooioo Posts: 23Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943

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

    @allan will need to take a look.

    Kevin

  • Mwhite007Mwhite007 Posts: 5Questions: 2Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    edited 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

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    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!

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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
    
  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

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

    Allan

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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.

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    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.

  • nirmal6353nirmal6353 Posts: 3Questions: 0Answers: 0

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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    @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

  • nirmal6353nirmal6353 Posts: 3Questions: 0Answers: 0

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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin
    edited 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

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    Awesome - thanks for the confirmation.

    Allan

  • nirmal6353nirmal6353 Posts: 3Questions: 0Answers: 0

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

  • chiraghapanichiraghapani Posts: 11Questions: 1Answers: 0
    edited 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 () {
            }
        });
    
  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

Sign In or Register to comment.