How to Generate DataTable with Json Data

Question

I have API Call abd which will be returning Json like below

{
    "status": true,
    "message": "Data Sent",
    "data": [
        {
            "id": 9,
            "name": "North",
            "colType": 7,
            "userID": 0,
            "isVisible": false
        }
    ]
}

And below i have JavaScript Ajax Call but it is returning Empty datatable please do help

$('#myTable').DataTable({
    destroy: true,
    responsive: true,
    "ajax": {
        "url": url+'/api/CommonMasters/7/GetByUserID/'[email protected],
        "type": "GET",
        "datatype": "json",
    },
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "columns": [
        { "data": "name", "autoWidth": true },
        {
            "render": function (data, type, full, meta) { return "<a  id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
        },

    ]

});

andrewJames · Accepted Answer · 2020-04-16 15:42:25Z

In the ajax section, you need to define your data source: "dataSrc": "data".

"ajax": {
    "url": url+'/api/CommonMasters/7/GetByUserID/'[email protected],
    "type": "GET",
    "datatype": "json",
    "dataSrc": "data"
},

Why is this needed? Your JSON data structure does not have a "name" item at the top level. Names are nested inside the top-level "data" object. This extra directive tells DataTables to look only at the JSON's "data" object as its starting point.

See here for the related documentation:

The ajax option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc to provide the ability to alter what data DataTables will read from the JSON returned from the server...

Also, on an unrelated note, I don't think you need this: destroy: true - try removing it. It probably does not make sense to try to destroy the table object while you are initializing it.

Collectives™ on Stack Overflow

How to Generate DataTable with Json Data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related