ReferenceError when instanciating Editor

mikeosoft

Error messages shown:
Uncaught ReferenceError: DataTable is not defined

Description of problem:

I'm trying to add Editor to an existing web app whish is already using DataTables.
Before adding Editor, the included files are jquery 3.6, bootstrap 5.3 and ... :

<script src="~/libs/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="~/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
    
<script src="~/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="~/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="~/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="~/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="~/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="~/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="~/libs/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="~/libs/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="~/libs/datatables.net-select/js/dataTables.select.min.js"></script>

I used the download composer tool on DataTables website to choose :
1. Bootstrap 5
2. DataTables, Editor, with Extensions (Buttons, DateTime, FixedColumns, KeyTable, Responsive, Select)
3. Download files with Minify and Concatenate options

Then I tried various things with no success.
Everything I try is resulting in the same error, which is when I instanciate the editor, I get : "Uncaught ReferenceError: DataTable is not defined" at this line :

const editor = new DataTable.Editor({ ... });

What I tried :
I added the downloaded files and replaced the existing css and script tags using only the datatables.min.js as the main entrypoint. I found that I needed to add back some previous files (datatables.net/js/jquery.dataTables.min.js and datatables.net-bs5/js/dataTables.bootstrap5.min.js) because the styling was broken.

I downloaded again with only Editor checked and using all my previous files with downloaded datatables.min.js.

I tried adding only the Editor-2.2.2/js/dataTables.editor.min.js and Editor-2.2.2/js/editor.bootstrap5.min.js

There is no 404 on file requests or other errors on the page.

What am I doing wrong?
Thank you

kthorngren

Its hard to say without seeing what you have done. Possibly a JS load order problem or maybe a duplicated JS include. I think using new DataTable.Editor(..) was introduced with Datatables 1.11. Possibly you have a previous version which requires the old syntax of new $.fn.dataTable.Editor(..).

Maybe you need to clear the browser's cache to make sure you have all the current versions that you downloaded.

Here is a working example with BS 5, jQuery 3.6, DT 1.13.6 and Editor.
https://live.datatables.net/guwafemu/421/edit

Kevin

mikeosoft

Ah! This makes sense.
The libraries I am using are 1.10.

I will look into that and come back.
Thanks

mikeosoft

Thank you, It works now!