Migrating Dom To Layout Option (v1 to v2)

medinem

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

});

allan

"<'table-responsive'tr>" +

That currently isn't possible with the layout option 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

medinem

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

allan

Yes, that's the CSS defined by Bootstrap.

You could do what you are looking for with:

initComplete: function () {
  this.api().table().node().closest('div').classList.add('table-responsive');
}

Example here: https://live.datatables.net/zuriqiwu/1/edit .

I'll be looking how it might be possible to add that class to the div with layout in DataTables 2.1.

Allan

medinem

thank you allan