我想把socket事件中接收到的数据显示到ajax数据表中

Question

我使用套接字从我的后端接收json数据。我正在接收data变量中的数据，并希望将其迭代到ajax数据表中。这是我的代码。

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>';
}
}          
],
});

套接字中的数据变量on是我接收数据的地方。

我试着把数据而不是URL到ajax数据表，但它没有工作。请指导我如何使用该数据填充表

Answer 1

我很确定从套接字事件的数据填充jQuery DataTable，您可以使用ajax.reload()方法来更新表的数据。下面是一个示例:

// 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);
});

您还可以通过向ajax.reload()方法传递对象来指定表的数据源和其他选项。

table.ajax.reload({
url: "https://testdma.tech-east.com.pk/dma/invoices/getAllInvoices",
dataSrc: "doc",
order: [[0]],
});