Migrating Dom To Layout Option (v1 to v2)

Migrating Dom To Layout Option (v1 to v2)

medinemmedinem 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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    "<'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

  • medinemmedinem Posts: 3Questions: 1Answers: 0
    edited April 17

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    edited April 18 Answer ✓

    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

  • medinemmedinem Posts: 3Questions: 1Answers: 0

    thank you allan <3

Sign In or Register to comment.