Datatables.net no load JSON - SignalR

Question

I want to load the following JSON object into Datatables.net but it does not work. I tried to find a solution like this: Datatables.net json data load, but without success.

I use SignalR to pass the JSON from the server-side to the client, and it runs because I can receive the JSON but I can't load it into a Datatable.

Please, could someone help me?

Thanks in advance!

C# code:

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;

Here is my 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"
    }]
}

Here is my 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'
        }
    });
}

My HTML code:

<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>

Do not serialize your `string json = JsonConvert.SerializeObject(obj);`. This will serialize your list twice and hence your DataTable is not getting initialized. Just do a `return Json(obj,JsonRequestBehavior.AllowGet)` — Rahul Sharma, Jul 22 '19 at 11:20
Thanks @rahulsharma for the answer... For use Json(obj,JsonRequestBehavior.AllowGet) i have to added :Controller to my class. Anyway, now i receive a object but still not working. Thanks for looking into it — darktemplar, Jul 22 '19 at 12:20
@rahulsharma i use SignalR for calling my hub.client.inizializzaFiltri method. — darktemplar, Jul 22 '19 at 12:24
@darktemplar Since you are using webforms, the problem that I can understand is that you are not telling your `DataTable` where to get the data from. In your ajax, try specifying the url and dataSrc as: `"url": "data.json", "dataSrc": "data"`. You can read more about this here: https://stackoverflow.com/questions/3531438/jquery-datatables-server-side-processing-using-asp-net-webforms — Rahul Sharma, Jul 23 '19 at 13:49

naveen · Answer 1 · 2019-07-22T12:44:22.967

I did not see you setting the property data. Please assign data: data when you initialize the table.

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

score 0 · Accepted Answer · answered Jul 24 '19 at 11:33

Thanks again #naveen #ehsanmhdi and #rahsharm77 for your suggestions. I solved in this way...

C# code:

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

    return json;

JS code:

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' },        
         ...

I have to Deserialize che JSON using JSON.parse(data) before to put it in the DataTable.

Thanks again

Datatables.net no load JSON - SignalR

2 Answers2