jQuery数据表不接受有效的JSON数据:SignalR MVC-实时数据

时间:2018-07-26 11:17:27

标签: javascript jquery json datatables signalr

客户端上的脚本,该脚本具有在SignalR.connection.Start.Start上初始化Datatable并在sqldependency更改时从中心获取UpdateData的功能。

$(function () {
// Reference the hub.
var hubNotif = $.connection.RunningPOHub;

// Start the connection.
$.connection.hub.start().done(function () {
    getAll();
});

// Notify while anyChanges.
hubNotif.client.updatedData = function (data) {
    getUpdatedData(data);
}
});

function getAll() {

$('#demoGrid').dataTable({
    "processing": true, // for show progress bar
    "serverSide": true, // for process server side
    "filter": true, // this is for disable filter (search box)
    "orderMulti": false, // for disable multiple column at once
    "pageLength": 2,
    "responsive": true,

    "ajax": {
        "url": "/RunningPO/GetData",
        "type": "POST",
        "datatype": "json",
        "dataSrc": ""
    },
    "columns": [
                  { "data": "Unit", "name": "Unit", "autoWidth": true },
                  { "data": "PO_NO", "name": "PO_NO", "autoWidth": true },
                  { "data": "QUANTITY_AV", "title": "Quantity", "name": "QUANTITY_AV", "autoWidth": true }
    ],
});
}

function getUpdatedData(data) {
var jdata= JSON.stringify(data);
alert(JSON.stringify(data));//Please see the attached screenshot and JSON 
                                                  //response shown below.
debugger;
$('#demoGrid').dataTable({
    "destroy": true,
    "processing": true, // for show progress bar
    "serverSide": true, // for process server side
    "filter": true, // this is for disable filter (search box)
    "orderMulti": false, // for disable multiple column at once
    "pageLength": 2,
    "responsive": true,
    "data": jdata,

    "columns": [
                  { "data": "Unit", "name": "Unit", "autoWidth": true },
                  { "data": "PO_NO", "name": "PO_NO", "autoWidth": true },
                  { "data": "QUANTITY_AV", "title": "Quantity", "name": "QUANTITY_AV", "autoWidth": true }
    ],
});
}

从服务器获得的JSON响应。

JSON Response

[
    {"PO_NO":"237","Unit":"TSD-1","QUANTITY_AV":"123.45"},
    {"PO_NO":"5","Unit":"TSD-2","QUANTITY_AV":"765.90"},
    {"PO_NO":"25","Unit":"TSD-3","QUANTITY_AV":"78998"}
]

将数据加载到初始getAll()函数中(如下所述),该函数从内部对控制器/ ActionMethod的ajax调用中接收数据。

Initial Datatable

当通过SignalR Hub从服务器接收到响应并将其加载到getUpdatedData(data)函数的$('#demoGrid').dataTable({})中时。 jQuery-Datatable引发错误

  

无效的JSON数据

1 个答案:

答案 0 :(得分:0)

您的json必须是这样的:

{
data: [
    {"PO_NO":"237","Unit":"TSD-1","QUANTITY_AV":"123.45"},
    {"PO_NO":"5","Unit":"TSD-2","QUANTITY_AV":"765.90"},
    {"PO_NO":"25","Unit":"TSD-3","QUANTITY_AV":"78998"}
    ]
}

数据json必须包含包含您的列表的数据属性