Topic: Migrating datatable to 7.2.0 using UMD
Torroni pro asked 6 months ago
Expected behavior Successful migration of datatable from MDB standard 6.4.0 to MDB standard 7.2.0 using UMD
Actual behavior datatable not initialised
Resources (screenshots, code snippets etc.) I'm migrating from 6.4.0 to 7.2.0. I have followed the migration instructions and I'm testing the end result, loading the html file locally into the browser. There are a few things that don't work. This post concerns datatable elements. This is how I instantiated a datatable via Javascript using version 6.4.0:
const orderTableColumns = [
{ label: 'Id', field: 'id' },
{ label: 'Processor', field: 'processor' },
{ label: 'Start Time', field: 'vstart' },
{ label: 'Stop Time', field: 'vstop' },
{ label: 'Processing Start', field: 'pstart' },
{ label: 'Processing Stop', field: 'pstop' },
{ label: 'Status', field: 'status' },
{ label: 'Node', field: 'node' }
];
var orderTableSort = { column: "id", order: "ASC" };
var orderTable;
orderTable = new mdb.Datatable(
document.getElementById('orderTable'),
{ columns: orderTableColumns, },
{ loading: true, noFoundMessage: 'no results', selectable: true, multi: true, sm: true, fullPagination: true, fixedHeader: true, forceSort: true, sortField: orderTableSort.column, sortOrder: orderTableSort.order.toLowerCase() }
);
According to the migration guide:
Datatable - add data-mdb-datatable-init attribute to .datatable.
but this works only if the datatable is instantiated via html.
In the datatable component section, there are examples of how to instantiate it via javascript using UMD, and they are the same as in v6.4.0, there is no mention of the data-mdb-datatable-init attribute.
If I create a snippet on the mdbootstrap web portal, it works, but the same code does not work when executed locally by a browser, I get the following error: Uncaught TypeError: mdb.Datatable is not a constructor
Torroni pro answered 6 months ago
I'm not doing any import, the migration guide says that they are only required when using ES6, they are not required when using UMD. At the end of my html file I have:
<script type="text/javascript" src="js/mdb.umd.min.js"></script>
In my html I have a wrapper element for the datatable:
<div id="orderTable"></div>
I instantiate the datatable using the new constructor, no init attribute. The console shows the following error:
Uncaught TypeError: mdb.Datatable is not a constructor
console.log(mdb) does not print anything.
Kamila Pieńkowska staff answered 6 months ago
If you use new
constructor you are not suppose to use html init attributes. Since you init components one way or another - not both.
Plese describe how are doing your imports and check if you get any console errors. Also see what you will get when you try console.log(mdb)
Torroni pro commented 6 months ago
This fixed itself after I have removed the data-init from the canvas (see other post). Thanks.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: laptop
- Browser: Google Chrome Version 112.0.5615.121 (Official Build) (64-bit)
- OS: Microsoft Windows 11 Pro
- Provided sample code: Yes
- Provided link: No
Torroni pro commented 6 months ago
Auto-fill put an old version of Chrome, I'm actually using Version 122.0.6261.129 (Official Build) (64-bit)