can you help me Populating select options from the database I’m using Tabulator to update data from the database dynamically can you check the code below and tell me how I can save data on the database or there any other way I can use Populating
Full Code on a tabulator JS
<script>
document.addEventListener("DOMContentLoaded", function() {
var tabledata = {!! $Payment !!};
var Paymentcat = {!! $Paymentcat !!};
var contract = {!! $Contract !!};
var paymentmethod = {!! $PaymentMethod !!};
var product = {!! $Product !!};
var table = new Tabulator("#example-table-theme", {
layout: "fitColumns",
columnCalcs:"both",
paginationSize:20,
pagination: "local", // Enable local pagination
paginationSizeSelector:[10, 20, 30, 50, 100, 200],
paginationCounter:"rows",
data: tabledata,
columns: [
{ title: "Payment ID", field: "PaymentID", editor: "input"},
{ title: "Payment Category",field: "category.Name", editor: "list",
editorParams: function(cell, formatterParams, onRendered) {
var options = {};
Paymentcat.forEach(function(item) {
options[item.ID] = item.Name;
});
// Return the options for the editor
return {
values: options ,
};
},
},
{
title: "Select Contract /Product",
field: "Descriptions",
editor: "list",
editorParams: function(cell, onRendered, success, cancel, editorParams) {
var rowData = cell.getRow().getData();
var category = rowData.category.Name;
var netpay = rowData.NetPay;
var options = {};
if (category === "Product Payment" || category === "1") {
product.forEach(function(item) {
options[item.Name] = item.Name;
});
} else if (category === "Membership Payment" || category === "2" ) {
contract.forEach(function(item) {
options[item.Package] = item.Package;
});
////////////////////////////////////////////////////////////////
} else if (category === "3") {
////////////////////////////////////////////////////////////////
} else if (category === "4") {
////////////////////////////////////////////////////////////////
}
return {
values: options,
};
}
},
{ title: "Net Pay (₱)", field: "NetPay", editor: "number" },
{ title: "Discount", field: "Discount", editor: "number" },
{ title: "Grand Total", field: "GrandTotal", editor: "number", bottomCalc:"sum", bottomCalcParams:{
precision:2,}},
{ title: "Date Sale", field: "DateSale", editor: "date"},
{ title: "Payment Method",field: "PaymentMethod", editor: "list",
editorParams: function(cell, formatterParams, onRendered) {
var options = {};
paymentmethod.forEach(function(item) {
options[item.Name] = item.Name;
});
// Return the options for the editor
return {
values: options ,
};
},
},
{ title: "Sales Person", field: "SalesPerson", editor: "input"},
{ title: "ReferenceNo", field: "ReferenceNo", editor: "input"},
{ title: "Receipt", field: "Receipt", editor: "input"},
{ title: "Status", field: "Status"},
],
});
table.on('cellEdited', (cell) => {
var row = cell.getRow();
var field = cell.getField();
var value = cell.getValue();
var data = {
id: row.getData().ID, // Get the MID value from the row data
column: field,
value: value
};
console.log(data);
// Update the data in the table
axios.get(`/payment/edit/${data.id}`, {
params: {
column: data.column,
value: data.value
}
})
.then(function(response) {
if (response.data.success) {
table.setData('/payment/view');
} else {
//alert("The provided data is already exists for another member");
table.setData('/payment/view');
}
})
.catch(function(error) {
console.log(response.data.message);
});
})
// Add row to bottom of table on button click
document.getElementById("reactivity-add").addEventListener("click", function() {
var newData = { ID: "" };
tabledata.unshift(newData);
table.setData(tabledata);
// Send AJAX request to store the new data
axios.post('/payment/store', newData)
.then(function(response) {
//table.setData('/payment/view');
})
.catch(function(error) {
// Handle error
console.error(error);
});
});
});
</script>
This is the foreach
if (category === "Product Payment" || category === "1") {
product.forEach(function(item) {
options[item.Name] = item.Name; // Get Data like item.Name , item.Price and parse data to other cell
});
Cell I want to parse data from foreach
{ title: "Net Pay (₱)", field: "NetPay", editor: "number" },
{ title: "Discount", field: "Discount", editor: "number" },
{ title: "Grand Total", field: "GrandTotal", editor: "number", bottomCalc:"sum", bottomCalcParams:{
precision:2,}},
