We Keep Coding

I want to show the data received in my socket event into ajax datatable

I am using socket to receive the json data from my backend. I am receiving the data in the DATA variable and want to iterate it into the ajax datatable. Here is my code.
`
socket.on('getinvoices', (data) => {
var table = $('#table1').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
order: false,
ajax: {
url : "https://testdma.tech-east.com.pk/dma/invoices/getAllInvoices",
dataSrc: "doc",
order: [[0]],
},
columns: [
{ data: 'recipientName' },
{ data: 'recipientAddress' },
{ data: 'recipientPhoneNumber' },
{ data: 'recipientEmail' },
{ data: 'services[/ ].serviceName' },
{ data: 'services[/ ].servicePrice' },
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn" value=' +data._id +'>Edit</button>';
}
},
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn2" value=' +data._id +'>Print Invoice</button>';
}
}
],
});
The data variable on in the socket is where I am receiving my data into.
I tried putting the DATA instead of URL into the ajax datatable but it didnt worked.Kindly guide me how can i populate table with that data

I'm pretty sure to populate a jQuery DataTable with data from a socket event, you can use the ajax.reload() method to update the table's data. Here is an example of how you could do this:
// Define the table
var table = $('#table1').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
order: false,
columns: [
{ data: 'recipientName' },
{ data: 'recipientAddress' },
{ data: 'recipientPhoneNumber' },
{ data: 'recipientEmail' },
{ data: 'services[/ ].serviceName' },
{ data: 'services[/ ].servicePrice' },
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn" value=' +data._id +'>Edit</button>';
}
},
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn2" value=' +data._id +'>Print Invoice</button>';
}
}
]
});
// Handle the 'getinvoices' socket event
socket.on('getinvoices', (data) => {
// Update the table data with the data from the socket event
table.ajax.reload(null, false);
});
You can also specify the data source and other options for the table by passing an object to the ajax.reload() method.
table.ajax.reload({
url: "https://testdma.tech-east.com.pk/dma/invoices/getAllInvoices",
dataSrc: "doc",
order: [[0]],
});

Jquery Datatable - dynamically adding class to specific columns

In Jquery Datatable, I am trying to add a class named "control" in specific columns but it seems not working. I do not see any errors.
I am selecting columns by using class name (all) and then trying to add another class "control". Please see the code below,
public static CreateTableView(tableId: string) {
let dataTable = $(tableId).DataTable({
deferRender: true,
scrollY: '200px',
scrollX: false,
scrollCollapse: true,
searching: false,
paging: false,
info: false,
columns: [
{ title: "Name", data: "Name" className: "all" },
{ title: "Age", data: "Age" },
{ title: "Serial Number", data: "Serial" },
{ title: "Description", data: "Descritption", className: "all" },
{ title: "Errors", data: "Notes", className: "all" }
],
responsive: {
details: {
type: 'none',
target: '.btn-link',
display: GetDetailsDialogDisplay(tableId),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
},
order: [1, 'asc'],
select: {
style: 'single',
selector: 'td .btn-link',
className: 'selected bg-selected-row'
}
});
$(tableId).off('click', '.btn-link').on('click', '.btn-link', function () {
dataTable.columns('.all').to$().addClass('control');
});
return dataTable;
};
Any suggestion / direction will be greatly appreciated.

Laravel Route in JavaScript Function

I have the below section of my js file but instead of hard code http://127.0.0.1:8000/Edit/Fee/Category/1. I need to Pass laravel route like this
{{route('Edit.Fee.Category',$Category->id)}}
var initTable5 = function() {
var table = $('#kt_datatable5');
// begin first table
table.DataTable({
scrollY: '450vh',
scrollX: true,
scrollCollapse: true,
columnDefs: [{
targets: -1,
title: 'Actions',
orderable: false,
width: '125px',
render: function(data, type, full, meta) {
return '\
\
Click To Pay\
\
';
},
},
],
});
};

How do I call a Vue.js method from a link inside data table?

I am building a Vue.js application using the Vue Webpack template. Within a component, I am initializing a Datatable like this:
<script>
export default {
name: 'DataTable',
mounted() {
$('#datatable').dataTable({
serverSide: true,
ajax: {
url: '/tableData',
},
processing: true,
searching: false,
pageLength: 25,
order: [[0, 'desc']],
columns: [
{
searchable: false,
data: 'updatedAt',
render: data => format(new Date(data), 'MMM Do, YYYY - h:mm:ss a'),
},
{
orderable: false,
data: 'user',
render: (data) => {
return `${data.firstName} ${data.lastName}`;
},
},
{
searchable: false,
orderable: false,
render() {
return 'View Details';
},
},
],
});
},
methods: {
openModal() {
console.log('Open modal code goes here');
}
}
}
</script>
This works fine and the table is rendered in the browser. My question - how do I call the openModal() method from inside the data table? As you can see, I am trying to call the method in columns[2].render but that doesn't work (likely because Vue does not compile the return string. How can I make this work?

you can add a click event on datatable callback.
Hope this helps
mounted() {
var self = this;
$('#datatable').dataTable({
serverSide: true,
ajax: {
url: '/tableData',
},
processing: true,
searching: false,
pageLength: 25,
order: [[0, 'desc']],
columns: [
{
.........
},
{ title: 'Action', targets:7, data: 'id',
"render":function(data, type, row, meta){
//data item in case you want to send any data
return 'Open Modal';
}
}
],
"drawCallback": function( settings ) {
$(".open-item").on( 'click', function (e) {
self.OpenModal(e.target.dataset.itemId);
});
}
});
},
methods: {
openModal:function() {
console.log('Open modal code goes here');
}
}

Problems displaying array data for datatables

I'm having problems display data in datatables, if I put the array straight in like this it works
$.parseJSON("[[\"1\",\"New Zealand\",\"20\"],[\"2\",\"Australia\",\"30\"]]");
but when I do it using a variable it doesn't it says read the error docs https://datatables.net/manual/tech-notes/4
I don't understand what's going on here
var self = this;
var data = $.parseJSON(self.model.get('shipping'));
// data is in this format [["1","New Zealand","20"],["2","Australia","30"]]
var intfreight = $('#edit-int-freight').DataTable(
{
//"aoColumnDefs": [{ "aTargets": [ 2 ] }] ,
'columnDefs': [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
data: data,
columns: [
{ title: 'id' },
{ title: 'country', searchable: true},
{ title: 'shipping_rate',
render: function (data, type, row) {
return '$' + data;
}},
{ title: 'action', orderable: false, searchable: false, render: function() {
return '<a class="delete" href="#edit/delete-freight">Delete</a>';
}}
]
});