Datatables.net 无负载 JSON - SignalR答案

【问题标题】：Datatables.net no load JSON - SignalRDatatables.net 无负载 JSON - SignalR
【发布时间】：2019-07-22 11:03:18
【问题描述】：

我想将以下 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>

【问题讨论】：

在console.log(data)中，是data是JSON吗？
不要序列化你的string json = JsonConvert.SerializeObject(obj);。这将序列化您的列表两次，因此您的 DataTable 没有被初始化。只需做一个return Json(obj,JsonRequestBehavior.AllowGet)
感谢@rahulsharma 的回答...为了使用 Json(obj,JsonRequestBehavior.AllowGet) 我必须将 :Controller 添加到我的班级。无论如何，现在我收到一个对象但仍然无法正常工作。感谢您的调查
@rahulsharma 我使用 SignalR 调用我的 hub.client.inizializzaFiltri 方法。
@darktemplar 由于您使用的是网络表单，我能理解的问题是您没有告诉您的DataTable 从哪里获取数据。在您的 ajax 中，尝试将 url 和 dataSrc 指定为："url": "data.json", "dataSrc": "data"。您可以在此处阅读更多相关信息：stackoverflow.com/questions/3531438/…

标签： javascript c# json datatables signalr

【解决方案1】：

我没有看到你设置属性data。请在初始化表格时分配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'
        }
    });
}

【讨论】：

【解决方案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，然后才能将其放入 DataTable。

再次感谢

【讨论】：