Metronic 9 Datatables.net

Question

Hello everyone,
I have been developing with the metronic8 version for a long time. I am very used to it. But I want to use the metronic9 version in my new projects. What do I need to do to use the datatable of datatables.net. I installed the package with npm. There is no problem on the js side, but the design is very bad. What do I need to do for this!

Faizal · Answer

Hi Ä°sa YalçÄ±n

In Metronic 9, we use Tailwind for styling. You can check out how Datatables.net works with Tailwind here:


This might help you get the design

Thank you

İsa · Answer

Hello again! This is how I solved it temporarily. app.scss

#role_table_wrapper {
    .dt-layout-row:has(.dt-search),
    {
        @apply hidden;
    }
    table {
        tr td.dt-empty{
            @apply text-center py-4 text-gray-600 text-2sm font-medium;
        }
    }
    div:nth-child(3) {
        @apply m-2 flex justify-between gap-3 text-gray-600 text-2sm font-medium;
    }
}

Sample datatable usage datatable.js My custom datatable methods.

import $ from "jquery";

const customPagination = () => {
    const pagination = $('.dt-paging nav[aria-label="pagination"]');
    if (pagination.length) {
        pagination.addClass('pagination');
        pagination.find('button').addClass('btn');
        pagination.find('button:first-child').html('');
        pagination.find('button:last-child').html('');
        pagination.find('button.current').addClass('active disabled');
        pagination.find('button.disabled').addClass('disabled');
    }
}
export {customPagination}

const headerCallback = (thead, data, start, end, display) => {
    $(thead).find('th').each(function(index) {
        const column = $('#myTable').DataTable().column(index); // DataTable'dan ilgili sütunu al
        const columnName = $(this).text().trim();

        if (column.orderable()) {
            $(this).html(`
                
                    
                        ${columnName}
                    
                    
                
            `);
        } else {
            $(this).text(columnName);
        }
    });
};
export {headerCallback}

const drawCallback = (datatable, settings) => {
    customPagination();

    const order = datatable.api().order();
    datatable.api().columns().every(function(index) {
        const columnHeader = this.header();
        const isSortedAsc = (order[0][0] === index && order[0][1] === 'asc');
        const isSortedDesc = (order[0][0] === index && order[0][1] === 'desc');
        $(columnHeader).find('.sort').removeClass('asc desc');
        if (isSortedAsc) {
            $(columnHeader).find('.sort').addClass('asc');
        } else if (isSortedDesc) {
            $(columnHeader).find('.sort').addClass('desc');
        }
    });
}
export {drawCallback}

index.js My page.

"use strict";

import DataTable from "datatables.net";
import {dataTableTRLang, customPagination, headerCallback, drawCallback} from "@/datatables.js";
import $ from "jquery";

const KTRolePage = function () {
    const tableEl = document.querySelector("#role_table");
    let dataTable = null;

    const initDatatable = () => {
        dataTable = new DataTable(tableEl, {
            responsive: false,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            stateSave: true,
            ajax: {
                url: 'role/list-with-datatable',
                method: 'GET',
                data: function ( data ) {
                    data.search = $('[data-kt-role-table-filter="search"]').val().trim();
                }
            },
            columns:[
                {data:'name'},
                {data:'user_count'},
                {data:null, orderable: false},
                {data:null, orderable: false}
            ],
            columnDefs: [
                {
                    targets: [0,1],
                    orderable: true,
                    render: (data,sss,row) => {
                        return `${data}`
                    }
                },
                {
                    targets: 2,
                    orderable: false,
                    render: (data, sss, row) => {
                        return `
                                  
                                  
                                 `
                    }
                },
                {
                    targets: 3,
                    orderable: false,
                    render: (data, sss, row) => {
                        return `
                                  
                                  
                                 `
                    }
                }
            ],
            language: dataTableTRLang,
            initComplete: function(settings, json) {
                customPagination();
            },
            drawCallback: function (settings) {
                drawCallback(this, drawCallback)
            },
            headerCallback: headerCallback,
        });
    }

    return {
        init: function () {
            initDatatable();
        }
    }
}

KTDom.ready(() => {
    KTRolePage().init();
});

Metronic 9 Datatables.net

Replies (2)

Metronic

ReUI

Products

Legal

Stay Connected