I am trying to send my tabulator row data to my server because i want to delete it from my database onClick
of the distribute button but i cannot seem to figure that out. I have added a fetch function that should post to the specified express route which is not receiving that request. Someone kindly let me know how to solve this
Here is my script tag:
function btnFormatter( cell, params, onRendered ) {
var element = document.createElement('button');
var link = document.createElement('a')
link.textContent = 'Distribute'
link.className = "button-link"
element.appendChild(link)
onRendered( function() {
element.addEventListener('click',()=>{
var id = cell.getData().id
const data = cell.getRow().getData()
fetch('http://localhost:3000/delete/marketing', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
})
return element;
}
var table = new Tabulator(".table", {
height:'auto', // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
ajaxURL:'/marketing.json', //load data
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Customer Name", field:"name"},
{title:"Commodity", field:"commodity",headerFilter:'input'},
{title:"Quality", field:"quality",headerFilter:'input'},
{title:"Quantity", field:"quantity"},
{title:'Action',formatter:btnFormatter}
],
// rowClick:function(e, row){ //trigger an alert message when the row is clicked
// alert("Row " + row.getData().id + " Clicked!!!!");
// },
});
And my express route:
router.post('/delete/marketing',(req,res)=>{
console.log(req.body)
// connection.query('DELETE FROM order_table WHERE id = ?', req.body.id,(error,results)=>{
// if(error){
// console.log('error')
// } else {
// console.log('item deleted')
// }
// })
})