Tekil Mesaj gösterimi - Datatable listesi sürükle bırak yapma

Konu Datatable listesi sürükle bırak yapma

15-02-2024, 00:32:40

Selam arkadaşlar. Demo olarak datatable oluşturup içerisine 2 örnek koyuyorum sürükle bırak yaptığımda sıralama değişiyor. Fakat projeme dahil ettiğimde çalışmıyor.
2 saattir uğraşıyorum yoruldu kafam artık. Yardımcı olabilecek var mı acaba?
İçerisinde SIRA numarasını güncelleyerek sürükle bırak olarak çalışan JS kodu yok. Rica etsem çalıştırabilecek kodunuz varsa verir misin.

HTML Datatable kodlarım

<!--begin::Table-->
<table class="table align-middle table-row-dashed fs-6 gy-5 display-1" id="kt_table_dil">
    <thead>
    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
        <th class="w-10px pe-2">
            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_table_dil .form-check-input" value="1" />
            </div>
        </th>
        <th class="min-w-125px">Sıra</th>
        <th class="min-w-125px">Flag</th>
        <th class="min-w-125px">Adı</th>
        <th class="min-w-125px">Durum</th>
        <th class="min-w-125px">Varsayılan Dil</th>
        <th class="text-end min-w-100px">İşlem Seçiniz</th>
    </tr>
    </thead>
    <tbody class="text-gray-600 fw-semibold">
    <tr>
        <td>
            <div class="form-check form-check-sm form-check-custom form-check-solid">
                <input class="form-check-input" type="checkbox" value="1" />
            </div>
        </td>
        <td class="drag-handle">1</td>
        <td class="d-flex align-items-center">
            <!--begin:: Avatar -->
            <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                <a href="kullanici-id.php">
                    <div class="symbol-label">
                        <img src="assets/media/avatars/300-9.jpg" alt="Francis Mitcham" class="w-100" />
                    </div>
                </a>
            </div>
            <!--end::Avatar-->
        </td>
        <td>Türkçe</td>
        <td>Aktif</td>
        <td>Evet</td>
        <td class="text-end">
            <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Seçiniz
<i class="ki-outline ki-down fs-5 ms-1"></i>
            </a>
            <!--begin::Menu-->
            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="kullanici-id.php" class="menu-link px-3">Düzelt</a>
                </div>
                <!--end::Menu item-->
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-dil-table-filter="delete_row">Sil</a>
                </div>
                <!--end::Menu item-->
            </div>
            <!--end::Menu-->
        </td>
    </tr>
    <tr>
        <td>
            <div class="form-check form-check-sm form-check-custom form-check-solid">
                <input class="form-check-input" type="checkbox" value="1" />
            </div>
        </td>
        <td class="drag-handle">2</td>
        <td class="d-flex align-items-center">
            <!--begin:: Avatar -->
            <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                <a href="apps/user-management/users/view.html">
                    <div class="symbol-label">
                        <img src="assets/media/avatars/300-9.jpg" alt="Francis Mitcham" class="w-100" />
                    </div>
                </a>
            </div>
        </td>
        <td>İngilizce</td>
        <td>Pasif</td>
        <td>Hayır</td>
        <td class="text-end">
            <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Seçiniz
<i class="ki-outline ki-down fs-5 ms-1"></i>
            </a>
            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                <div class="menu-item px-3">
                    <a href="kullanici-id.php" class="menu-link px-3">Düzelt</a>
                </div>
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-dil-table-filter="delete_row">Sil</a>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<!--end::Table-->

JS kodlarım

"use strict";

var KTDilList = function() {
var e, t, n, r, o = document.getElementById("kt_table_dil"),
c = () => {
o.querySelectorAll('[data-kt-dil-table-filter="delete_row"]').forEach((t => {
t.addEventListener("click", (function(t) {
t.preventDefault();
const n = t.target.closest("tr"),
r = n.querySelectorAll("td")[2].querySelector("a").innerText;
Swal.fire({
text: "Silmek istediğinizden emin misiniz? ",
icon: "warning",
showCancelButton: !0,
buttonsStyling: !1,
confirmButtonText: "Evet",
cancelButtonText: "Vazgeç",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
                        }
}).then((function(t) {
t.value ? Swal.fire({
text: "Silme işlemi Başarılı. ",
icon: "success",
buttonsStyling: !1,
confirmButtonText: "Tamam",
customClass: {
confirmButton: "btn fw-bold btn-primary"
                            }
}).then((function() {
e.row($(n)).remove().draw()
})).then((function() {
a()
})) : "cancel" === t.dismiss && Swal.fire({
text: "Silme işlemi iptal edildi.",
icon: "error",
buttonsStyling: !1,
confirmButtonText: "Tamam",
customClass: {
confirmButton: "btn fw-bold btn-primary"
                            }
})
}))
}))
}))
},
l = () => {
const c = o.querySelectorAll('[type="checkbox"]');
t = document.querySelector('[data-kt-dil-table-toolbar="base"]'), n = document.querySelector('[data-kt-dil-table-toolbar="selected"]'), r = document.querySelector('[data-kt-dil-table-select="selected_count"]');
const s = document.querySelector('[data-kt-dil-table-select="delete_selected"]');
c.forEach((e => {
e.addEventListener("click", (function() {
setTimeout((function() {
a()
}), 50)
}))
})), s.addEventListener("click", (function() {
Swal.fire({
text: "Seçili dilleri silmek istediğinizden emin misiniz?",
icon: "warning",
showCancelButton: !0,
buttonsStyling: !1,
confirmButtonText: "Evet",
cancelButtonText: "Vazgeç",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
                    }
}).then((function(t) {
t.value ? Swal.fire({
text: "Seçilen tüm dilleri sildiniz!",
icon: "success",
buttonsStyling: !1,
confirmButtonText: "Tamam",
customClass: {
confirmButton: "btn fw-bold btn-primary"
                        }
}).then((function() {
c.forEach((t => {
t.checked && e.row($(t.closest("tbody tr"))).remove().draw()
}));
o.querySelectorAll('[type="checkbox"]')[0].checked = !1
                    })).then((function() {
a(), l()
})) : "cancel" === t.dismiss && Swal.fire({
text: "Seçili diller silinmedi",
icon: "error",
buttonsStyling: !1,
confirmButtonText: "Tamam",
customClass: {
confirmButton: "btn fw-bold btn-primary"
                        }
})
}))
}))
};
const a = () => {
const e = o.querySelectorAll('tbody [type="checkbox"]');
let c = !1,
l = 0;
e.forEach((e => {
e.checked && (c = !0, l++)
})), c ? (r.innerHTML = l, t.classList.add("d-none"), n.classList.remove("d-none")) : (t.classList.remove("d-none"), n.classList.add("d-none"))
};
return {
init: function() {
o && (o.querySelectorAll("tbody tr").forEach((e => {
const t = e.querySelectorAll("td"),
n = t[3].innerText.toLowerCase();
let r = 0,
o = "minutes";
n.includes("yesterday") ? (r = 1, o = "days") : n.includes("mins") ? (r = parseInt(n.replace(/\D/g, "")), o = "minutes") : n.includes("hours") ? (r = parseInt(n.replace(/\D/g, "")), o = "hours") : n.includes("days") ? (r = parseInt(n.replace(/\D/g, "")), o = "days") : n.includes("weeks") && (r = parseInt(n.replace(/\D/g, "")), o = "weeks");
const c = moment().subtract(r, o).format();
t[3].setAttribute("data-order", c);
const l = moment(t[5].innerHTML, "DD MMM YYYY, LT").format();
t[5].setAttribute("data-order", l)
})), (e = $(o).DataTable({
info: !1,
order: [],
pageLength: 10,
lengthChange: !1,
columnDefs: [{
orderable: !1,
targets: 0
                }, {
orderable: !1,
targets: 6
                }]
})).on("draw", (function() {
l(), c(), a()
})), l(), document.querySelector('[data-kt-dil-table-filter="search"]').addEventListener("keyup", (function(t) {
e.search(t.target.value).draw()
})), document.querySelector('[data-kt-dil-table-filter="reset"]').addEventListener("click", (function() {
document.querySelector('[data-kt-dil-table-filter="form"]').querySelectorAll("select").forEach((e => {
$(e).val("").trigger("change")
})), e.search("").draw()
})), c(), (() => {
const t = document.querySelector('[data-kt-dil-table-filter="form"]'),
n = t.querySelector('[data-kt-dil-table-filter="filter"]'),
r = t.querySelectorAll("select");
n.addEventListener("click", (function() {
var t = "";
r.forEach(((e, n) => {
e.value && "" !== e.value && (0 !== n && (t += " "), t += e.value)
})), e.search(t).draw()
}))
})())
}
}
}();

KTUtil.onDOMContentLoaded((function() {
KTDilList.init()
}));