DOM is not working in Datatable V2

medinem

Hi, i have a very confusing BUG Right now, DOM did perfectly work with Datatable v1 but now it is broken in version 2, what's wrong? layout is not working.
this is my version 1:

table = $("#user-index").DataTable({
    "language": {
        "url": "/assets/plugins/custom/datatables/fa.json",
        "lengthMenu": "Show_MENU_",
    },
    // Design Assets
    searchDelay: 500,
    stateSave: true,
    autoWidth: true,
    responsive: true,
    // 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-lg-3 col-md-4 col-sm-6 d-flex align-items-center'l>" +  // Page size dropdown
        "<'col-lg-5 col-md-4 col-sm-6 d-flex align-items-center justify-content-center'f>" +  // Search input centered
        "<'col-lg-4 col-md-4 col-sm-12 d-flex align-items-center justify-content-end'B>" +  // Buttons taking 3 columns and aligned to the right
        ">" +
        "<'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>" +
        ">",
    buttons: [
        {
            extend: 'collection',
            text: 'out',
            buttons: [
                { text: 'Excel', action: exportToExcel },
                { text: 'CSV', action: exportToCsv },
                { text: 'HTML', action: exportToHtml },
                { text: 'JSON', action: exportToJson },
                { text: 'XML', action: exportToXml },
                { text: 'YAML', action: exportToYaml }
            ]
        }
    ],
    // Searching Setups
    searching: { regex: true },
    // Ajax Filter using Axios
    ajax: function (data, callback, settings) {
        axios.post("/AdminArea/User/GetAllUsers", JSON.stringify(data), {
            headers: {
                'Content-Type': 'application/json',
                'RequestVerificationToken': token
            }
        }).then(response => {
            callback(response.data);
        }).catch(error => {
            console.error('Error fetching data:', error);
        });
    },
    // Columns Setups
    columns: [
        {
            data: "id",
            className: "align-middle",
            render: function (data, type, row, meta) {
                return meta.row + 1;
            }
        },
        { data: null, render: renderCombinedAvatarAndName, className: "align-middle" },
        { data: "personalCode", className: "align-middle" },
        { data: "phoneNumber", className: "align-middle" },
        { data: "nationalCode", className: "align-middle" },
        { data: "userName", className: "align-middle" },
        {
            data: "isActive",
            className: "align-middle",
            render: function (data) {
                return data ? '<span class="badge badge-success">active</span>' : '<span class="badge badge-danger">deactive</span>';
            }
        },
        { data: null, orderable: false, render: renderUserActions, className: "align-middle" }
    ],
    // Column Definitions
    columnDefs: [
        { targets: "no-sort", orderable: false },
        { targets: "no-search", searchable: false },
        {
            targets: "trim",
            render: function (data, type) {
                if (type === "display") {
                    return strtrunc(data, 7);
                }
                return data;
            }
        },
        { targets: 1, orderable: false, className: "no-sort" },
        { targets: "date-type", type: "date-eu" }
    ],
    order: [[5, 'asc']]
});

table = new DataTable("#user-index", {
    layout: {
        topStart: 'search',
        topEnd: 'pageLength',
        bottomStart: 'info',
        bottomEnd: 'paging',
    },
    language: {
        url: "/assets/plugins/custom/datatables/fa.json",
        lengthMenu: "show_MENU_",
    },
    searchDelay: 500,
    stateSave: true,
    autoWidth: true,
    responsive: true,
    processing: true,
    serverSide: true,
    paging: true,
    lengthMenu: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
    pageLength: 10,
    searching: { regex: true },
    ajax: {
        url: "/AdminArea/User/GetAllUsers",
        type: "POST",
        data: function (d) {
            return JSON.stringify(d);
        },
        contentType: "application/json",
        headers: {
            'RequestVerificationToken': token
        },
        dataSrc: function (json) {
            return json.data;
        }
    },
    columns: [
        {
            data: "id",
            className: "align-middle",
            render: function (data, type, row, meta) {
                return meta.row + 1;
            }
        },
        { data: null, render: renderCombinedAvatarAndName, className: "align-middle" },
        { data: "personalCode", className: "align-middle" },
        { data: "phoneNumber", className: "align-middle" },
        { data: "nationalCode", className: "align-middle" },
        { data: "userName", className: "align-middle" },
        {
            data: "isActive",
            className: "align-middle",
            render: function (data) {
                return data ? '<span class="badge badge-success">active</span>' : '<span class="badge badge-danger">deactive</span>';
            }
        },
        { data: null, orderable: false, render: renderUserActions, className: "align-middle" }
    ],
    columnDefs: [
        { targets: "no-sort", orderable: false },
        { targets: "no-search", searchable: false },
        {
            targets: "trim",
            render: function (data, type) {
                if (type === "display") {
                    return strtrunc(data, 7);
                }
                return data;
            }
        },
        { targets: 1, orderable: false, className: "no-sort" },
        { targets: "date-type", type: "date-eu" }
    ],
    order: [[5, 'asc']]
});

kthorngren

I built a test case for you with DT 2.0.8, BS 5 and Buttons:
https://live.datatables.net/zoqaciru/1/edit

I used your dom option. What behavior is not working?

I think Allan is working on the ability to add classes to the layout option. In the meantime you will probably want to stick with the dom option. The dom will be removed in DT 3.0 but since 2.0 just came out I suspect 3.0 will be a long time coming

Kevin

medinem

I want to remove the DOM option and use the new layout option in V2, but the layout option is not working. No matter what configuration I write, pagination is shown at the bottom, and the search field does not appear. This configuration:
layout: {
topStart: 'search',
topEnd: 'pageLength',
bottomStart: 'info',
bottomEnd: 'paging',
},
is not working, no matter what changes I make to it.
Additionally, when I upgraded to V2, the DOM option style changed. The titles are no longer inline with their fields; instead, they are positioned on top of the fields.

allan

That configuration appears to work okay: https://live.datatables.net/vibenoge/1/edit .

pagination is shown at the bottom

You do have bottomEnd: 'paging', so I would expect it to show at the bottom right of the table, which it is in the running code.

Can you link to a test case showing the issue please.

Allan

medinem

My problem has been resolved by downloading min.js and min.css from your website. However, I am experiencing a UI issue. When I set responsive: true, a plus sign (+) appears behind the row numbers, indicating that the responsive feature is not functioning correctly. Why is this happening?

allan

I don't know. That old icon is not the one that Responsive would be displaying. If you link to the page I can take a look.

Allan

medinem

Thank you for your response. I found the issue: it's a compatibility problem between my theme's CSS and Datatable version 2's CSS. This is why the problem persisted. I temporarily fixed it by downloading the official Datatable CSS and JS, replacing the theme provider's CSS, and removing their custom CSS written for version 1.