Datatables.net 无负载 JSON - SignalR

Question

我想将以下 JSON 对象加载到 Datatables.net 中，但它不起作用。我试图找到这样的解决方案：Datatables.net json data load，但没有成功。

我使用 SignalR 将 JSON 从服务器端传递到客户端，它运行是因为我可以接收 JSON 但我无法将其加载到数据表中。

拜托，有人可以帮助我吗？

提前致谢！

C#代码：

cmm_dbEntities db = new cmm_dbEntities();

var result = from a in db.TAB_PN
join b in db.TAB_APPL on a.idapplicability equals b.idapplicability
join c in db.TAB_ISSUE on a.idissue equals c.idissue
select new
{
    a.pn,
    a.title,
    b.appl_desc,
    c.issue,
    c.issue_date,
    c.rev,
    c.rev_date,
    a.equipment,
    a.formattype
};

var obj = new { data = result };
string json = JsonConvert.SerializeObject(obj);

return json;

这是我的 JSON:

{
    "data": [{
        "pn": "346B0300A3300.801",
        "title": "Test Bench Replenish Unit, Engine Oil - Operation and Maintenance Manual with Illustrated Parts Breakdown",
        "appl_desc": "DESCRIZIONE 005",
        "issue": "ISSUE-003",
        "issue_date": "2015-03-01T00:00:00",
        "rev": "0003",
        "rev_date": "AAAAAAAAB9M=",
        "equipment": "Test Bench, Replenish Unit, Engine Oil",
        "formattype": "XML"
    }, {
        "pn": "346B0300A3300.805",
        "title": "Test Bench Replenish Unit, Engine Oil - Operation and Maintenance Manual with Illustrated Parts Breakdown",
        "appl_desc": "DESCRIZIONE 015",
        "issue": "ISSUE-004",
        "issue_date": "2015-04-01T00:00:00",
        "rev": "004",
        "rev_date": "AAAAAAAAB9Q=",
        "equipment": "Test Bench, Replenish Unit, Engine Oil",
        "formattype": "XML"
    }, {
        "pn": "415808",
        "title": "Operating and Maintenance Manual for Ni-Cd Aircraft batteries",
        "appl_desc": "DESCRIZIONE 015",
        "issue": "ISSUE-001",
        "issue_date": "2015-01-01T00:00:00",
        "rev": "0001",
        "rev_date": "AAAAAAAAB9E=",
        "equipment": "Battery",
        "formattype": "XML"
    }, {
        "pn": "415818",
        "title": "Operating and Maintenance Manual for Ni-Cd Aircraft batteries",
        "appl_desc": "DESCRIZIONE 009",
        "issue": "ISSUE-002",
        "issue_date": "2015-02-01T00:00:00",
        "rev": "0002",
        "rev_date": "AAAAAAAAB9I=",
        "equipment": "Battery",
        "formattype": "XML"
    }]
}

这是我的js：

hub.client.inizializzaFiltri = function (data) {

    console.log(data);

    $('#PNTable').DataTable({
        dataSrc: "objects",
        columns: [
            { data: null, defaultContent: '' },
            { data: 'pn' },
            { data: 'title' },
            { data: 'appl_desc' },
            { data: 'issue' },
            { data: 'issue_date' },
            { data: 'rev' },
            { data: 'rev_date' },
            { data: 'equipment' },
            { data: 'formattype' }],
        order: [[1, "asc"]],
        columnDefs: [
            {
                orderable: false,
                className: 'select-checkbox',
                targets: 0
            },
        ],
        retrieve: true,
        select: {
            style: 'os',
            selector: 'td:first-child'
        }
    });
}

我的HTML代码：

<table id="PNTable" class="display">
    <thead>
        <tr>
            <th></th>
            <th>pn</th>
            <th>title</th>
            <th>appl_desc</th>
            <th>issue</th>
            <th>issue_date</th>
            <th>rev</th>
            <th>rev_date</th>
            <th>equipment</th>
            <th>formattype</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>pn</th>
            <th>title</th>
            <th>appl_desc</th>
            <th>issue</th>
            <th>issue_date</th>
            <th>rev</th>
            <th>rev_date</th>
            <th>equipment</th>
            <th>formattype</th>
        </tr>
    </tfoot>
</table>

Answer 1

我没有看到你设置属性 data。请在初始化 table 时分配 data: data。

hub.client.inizializzaFiltri = function (data) {

    console.log(data);

    $('#PNTable').DataTable({
        data: data //you are missing this
        dataSrc: "objects",
        columns: [
            { data: null, defaultContent: '' },
            { data: 'pn' },
            { data: 'title' },
            { data: 'appl_desc' },
            { data: 'issue' },
            { data: 'issue_date' },
            { data: 'rev' },
            { data: 'rev_date' },
            { data: 'equipment' },
            { data: 'formattype' }],
        order: [[1, "asc"]],
        columnDefs: [
            {
                orderable: false,
                className: 'select-checkbox',
                targets: 0
            },
        ],
        retrieve: true,
        select: {
            style: 'os',
            selector: 'td:first-child'
        }
    });
}

Answer 2

再次感谢#naveen #ehsanmhdi 和#rahsharm77 的建议。我是这样解决的...

C#代码：

    ...
    var obj = new { data = result };
    string json = JsonConvert.SerializeObject(obj);

    return json;

JS代码：

hub.client.inizializzaFiltri = function (data) {

    var jsn = JSON.parse(data);

    $('#PNTable').DataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": true,
    "bAutoWidth": true,
    "dataSrc": "",
    "data": jsn.data,
    "dataSrc": jsn.data,
     responsive: true,
     columns: [
        { "data": null, defaultContent: '' },
        { "data": 'pn' },
        { "data": 'title' },        
         ...

我必须先使用 JSON.parse(data) 反序列化 che JSON 才能将其放入数据表中。

再次感谢

Datatables.net 无负载 JSON - SignalR

Datatables.net no load JSON - SignalR

javascript

c#

json

datatables

signalr