Metronic DataTables not working with new layout option
I am using the latest version of Metronic 8.2.5 with DataTables Bootstrap 5 styling. However Metronic does not seem to respect the new layout option provided by Datatables.
For example when I initialize my table with below code but Metronic always keeps it's own layout format with dom elems positioned at the bottom of the table.
return new DataTable("#tableId", {
layout: {
topStart: {
pageLength: {
menu: [10, 25, 50, 100]
}
},
topEnd: {
search: {
placeholder: "Type search here"
}
},
bottomEnd: {
paging: {
numbers: 3
}
}
}
});Replies (3)
Hi,
Can you disable or override the dom parameter in your Datatable js initialization code?
By default, Metronic uses it in the global datatable setup in src/js/vendors/plugins/datatables.init.js.
Regards.
Hi @Sean
Thanks for the reply. That would work but I want to avoid hacking the source files so for now I have used the old style dom positioning in my own custo js file.
options.dom =
"<"d-flex justify-content-between bg-light-primary px-3 py-2"" +
"<"d-flex align-items-center"l>" +
"<"d-flex align-items-center"B>" +
"<"d-flex align-items-center"f>" +
">" +
"<"table-responsive"tr>" +
"<"d-flex justify-content-between px-3"" +
"<"d-flex align-items-center"i>" +
"<"d-flex align-items-center"p>" +
">";I hope that Metronic updates their code base soon to respect datatables new layout options.
Thanks
Hi,
That's a great workaround. Sure, we will migrate those code parts in a future update.
Regards.
