Migrating Dom To Layout Option (v1 to v2)
Migrating Dom To Layout Option (v1 to v2)
medinem
Posts: 3Questions: 1Answers: 0
Hello everyone,
I am currently using an old-fashioned method (DOM) to create paging, search, etc. Now, I have a question regarding how I can transition to the new layout option in DataTables version 2, as I have updated my project to this version. Below is my DataTables version 1 configuration:
table = $("#index").DataTable({
"language": {
"url": "/assets/plugins/custom/datatables/de.json",
"lengthMenu": "display _MENU_",
},
// Design Assets
searchDelay: 500,
stateSave: true,
autoWidth: true,
responsive: false,
// ServerSide Setups
processing: true,
serverSide: true,
// Paging Setups
paging: true,
lengthMenu: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
pageLength: 10,
pagingType: "full_numbers",
// Custom Export Buttons
"dom":
"<'row'" +
"<'col-sm-6 d-flex align-items-center justify-content-start'l>" +
"<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
">" +
"<'table-responsive'tr>" +
"<'row'" +
"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
">",
// Searching Setups
searching: { regex: true },
"error": function (xhr, error, thrown) {
console.log("An error occurred:", error, thrown)
},
});
This question has an accepted answers - jump to answer
Answers
That currently isn't possible with the
layoutoption I'm afraid. I'll need to have a little think about how that might be made possible - possibly a class specific for the table wrapper element.Allan
It is included in the default style CSS of my theme:
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px) {
.table-responsive-sm {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 767.98px) {
.table-responsive-md {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 991.98px) {
.table-responsive-lg {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 1199.98px) {
.table-responsive-xl {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 1399.98px) {
.table-responsive-xxl {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
Yes, that's the CSS defined by Bootstrap.
You could do what you are looking for with:
Example here: https://live.datatables.net/zuriqiwu/1/edit .
I'll be looking how it might be possible to add that class to the
divwithlayoutin DataTables 2.1.Allan
thank you allan