arifal/CKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix orderable datatable on mutations and products index

Browse Source
This commit is contained in:
arifal
2025-06-16 19:01:11 +07:00
parent aa233eb793
commit b803068d0e
12 changed files with 383 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
resources/js/warehouse_management/products/index.js
View File

@@ -1,68 +1,74 @@
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
});
// Wait for DataTables to be available
function initializeDataTable() {
// Debug: Check if DataTables is loaded
console.log("DataTables available:", typeof $.fn.DataTable !== "undefined");
console.log("jQuery version:", $.fn.jquery);
$(document).ready(function () {
console.log("Products index.js loaded");
// Check if DataTables is available
if (typeof $.fn.DataTable === "undefined") {
console.error("DataTables is not loaded! Retrying in 1 second...");
setTimeout(initializeDataTable, 1000);
console.error("DataTables not available!");
return;
}
let tableContainer = $("#products-table");
let url = tableContainer.data("url");
// Wait for DOM to be fully ready
setTimeout(function () {
initializeDataTable();
}, 100);
});
console.log("Table URL:", url);
function initializeDataTable() {
console.log("Initializing DataTable...");
let table = $("#products-table").DataTable({
// Destroy existing table if any
if ($.fn.DataTable.isDataTable("#products-table")) {
$("#products-table").DataTable().destroy();
}
// Initialize DataTable
var table = $("#products-table").DataTable({
processing: true,
serverSide: true,
destroy: true,
ajax: {
url: url,
error: function (xhr, error, thrown) {
console.error("DataTables Ajax Error:", error, thrown);
url: $("#products-table").data("url"),
type: "GET",
data: function (d) {
console.log("DataTables request data:", d);
return d;
},
error: function (xhr, error, code) {
console.error("DataTables AJAX error:", error, code);
console.error("Response:", xhr.responseText);
},
},
order: [[0, "asc"]], // Order by first column (code) ascending
columns: [
{
data: "DT_RowIndex",
name: "DT_RowIndex",
orderable: false,
searchable: false,
},
{
data: "code",
name: "code",
orderable: true,
searchable: true,
},
{
data: "name",
name: "name",
orderable: true,
searchable: true,
},
{
data: "category_name",
name: "category.name",
name: "category_name",
orderable: true,
searchable: true,
},
{
data: "unit",
name: "unit",
orderable: true,
searchable: true,
},
{
data: "total_stock",
name: "total_stock",
orderable: false,
searchable: false,
},
{
data: "action",
@@ -71,53 +77,14 @@ function initializeDataTable() {
searchable: false,
},
],
columnDefs: [
{
targets: [4, 5], // total_stock and action columns
orderable: false,
},
],
initComplete: function (settings, json) {
console.log("DataTables initialized successfully");
console.log("Settings:", settings);
console.log(
"Column ordering enabled for:",
settings.aoColumns.map((col, index) => ({
index: index,
orderable: col.bSortable,
name: col.sName || col.mData,
}))
);
},
drawCallback: function (settings) {
console.log("DataTables draw completed");
},
headerCallback: function (thead, data, start, end, display) {
console.log("Header callback - sorting icons should be visible");
},
order: [[1, "asc"]], // Order by code asc
pageLength: 10,
responsive: true,
ordering: true,
orderMulti: false,
});
// Debug: Log table instance
console.log("DataTable instance:", table);
// Test column ordering programmatically
setTimeout(function () {
console.log("Testing column ordering...");
try {
table.order([1, "desc"]).draw();
console.log("Column ordering test successful");
} catch (e) {
console.error("Column ordering test failed:", e);
}
}, 2000);
}
// Initialize when document is ready
$(document).ready(function () {
console.log("Document ready, checking for DataTables...");
initializeDataTable();
});
$(document).on("click", ".btn-destroy-product", function () {
Swal.fire({
title: "Hapus produk?",
@@ -142,7 +109,14 @@ $(document).on("click", ".btn-destroy-product", function () {
"Produk berhasil dihapus.",
"success"
);
$("#products-table").DataTable().ajax.reload();
try {
if ($.fn.DataTable.isDataTable("#products-table")) {
$("#products-table").DataTable().ajax.reload();
}
} catch (e) {
console.error("Error reloading table:", e);
location.reload(); // Fallback to page reload
}
},
error: function (xhr) {
Swal.fire("Error!", "Gagal menghapus produk.", "error");
@@ -174,9 +148,16 @@ $(document).on("click", ".btn-toggle-active", function () {
},
success: function (response) {
if (response.success) {
$("#products-table")
.DataTable()
.ajax.reload(null, false);
try {
if ($.fn.DataTable.isDataTable("#products-table")) {
$("#products-table")
.DataTable()
.ajax.reload(null, false);
}
} catch (e) {
console.error("Error reloading table:", e);
location.reload(); // Fallback to page reload
}
Swal.fire("Berhasil!", response.message, "success");
}
},
@@ -197,9 +178,25 @@ $(document).on("click", ".btn-product-stock-dealers", function () {
const productName = $(this).data("name");
const ajaxUrl = $(this).data("url");
// Check if modal elements exist
if ($("#product-name-title").length === 0) {
console.error("Modal title element not found");
return;
}
if ($("#dealer-stock-table").length === 0) {
console.error("Dealer stock table element not found");
return;
}
// Set product name in modal title
$("#product-name-title").text(productName);
// Destroy existing DataTable if any
if ($.fn.DataTable.isDataTable("#dealer-stock-table")) {
$("#dealer-stock-table").DataTable().destroy();
}
// Initialize or reload DataTable inside modal
$("#dealer-stock-table").DataTable({
destroy: true,
@@ -210,6 +207,14 @@ $(document).on("click", ".btn-product-stock-dealers", function () {
data: {
product_id: productId,
},
error: function (xhr, error, thrown) {
console.error(
"Dealer stock DataTables Ajax Error:",
error,
thrown
);
console.error("Response:", xhr.responseText);
},
},
columns: [
{
@@ -226,7 +231,15 @@ $(document).on("click", ".btn-product-stock-dealers", function () {
},
],
initComplete: function () {
$("#dealerStockModal").modal("show");
try {
if ($("#dealerStockModal").length > 0) {
$("#dealerStockModal").modal("show");
} else {
console.error("Modal #dealerStockModal not found");
}
} catch (e) {
console.error("Error showing modal:", e);
}
},
});
});