Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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
}
}
}
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


I merely imagined it usually is a perception to write could possibly help anybody ended up being experiencing difficulity looking into nevertheless We are somewhat doubtful only are permitted to placed labels along with details in below.lab diamond wedding bandExceptional article, gone ahead of time along with added your blog. My spouse and i can’t delay you just read additional via anyone.lab made diamonds



World of warcraft! What precisely tabs opener the place has long been in my situation. Considerably preferred, bookmarked as their favorite, That i can’t look forward to even more!lab diamonds SpainAwesome post. Typically the put up can affect a considerable amount of instant concerns our the community. We tend to can't be uninvolved towards such concerns. This unique put up will provide good ideas not to mention strategies. Especially instructive not to mention efficient.man made diamonds



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.



Hey Sean,

I was dealing the same issue for the last few days. I also upgraded to the latest version 8.2.6 today but still layout not working. Legacy dom works. Did you make the changes here? https://datatables.net/upgrade/2#dom-property

Is there any other missing feature for the datatables integration that we should know?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(