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

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("<i class="ki-outline ki-black-left"></i>");
 pagination.find("button:last-child").html("<i class="ki-outline ki-black-right"></i>");
 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&uuml;tunu al
 const columnName = $(this).text().trim();

 if (column.orderable()) {
 $(this).html(`
 <span class="sort">
 <span class="sort-label">
 ${columnName}
 </span>
 <span class="sort-icon"></span>
 </span>
 `);
 } 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}

"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 `<span class="font-normal text-2sm">${data}</span>`
 }
 },
 {
 targets: 2,
 orderable: false,
 render: (data, sss, row) => {
 return `<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
 <i class="ki-outline ki-notepad-edit">
 </i>
 </a>`
 }
 },
 {
 targets: 3,
 orderable: false,
 render: (data, sss, row) => {
 return `<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
 <i class="ki-outline ki-trash">
 </i>
 </a>`
 }
 }
 ],
 language: dataTableTRLang,
 initComplete: function(settings, json) {
 customPagination();
 },
 drawCallback: function (settings) {
 drawCallback(this, drawCallback)
 },
 headerCallback: headerCallback,
 });
 }

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

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