ReferenceError when instanciating Editor
ReferenceError when instanciating Editor
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
This question has an accepted answers - jump to answer
Answers
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 ofnew $.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
Ah! This makes sense.
The libraries I am using are 1.10.
I will look into that and come back.
Thanks
Thank you, It works now!