Populate datatables with AJAX call

Question

I am working on datatables. I need to populate my data table with AJAX call BUT I am unable to do so. Here is my AJAX call:

$('#call_analysis_basic_table').DataTable ({
    "ajax": {
        "url": "getBasicCallAnalysisData.json",
        "type": "POST"
    },
    "columns": [
        { "data": "ANUMBER" },
        { "data": "BNUMBER" },
        { "data": "DATETIME" },
        { "data": "DURATION" },
        { "data": "IMEI" },
        { "data": "IMSI" },
        { "data": "CELL ID" },
        { "data": "OPR ID" },
        { "data": "MSC ID" },
        { "data": "FILE ID" }
    ]
});

Datatable HTML code:

<table id="call_analysis_basic_table" class="display" cellspacing="0" width="100%">
    <thead style="background-color:#4d7496;color:#fff;">
        <tr>
            <th>aNumber</th>
            <th>bNumber</th>
            <th>datetime</th>
            <th>duration</th>
            <th>imei</th>
            <th>imsi</th>
            <th>cellID</th>
            <th>oprid</th>
            <th>msc_id</th>
            <th>file_id</th>
        </tr>
    </thead>
</table>

Expected JSON Response :

{
    "result": [
        [
            "3028540439",
            "3222027076",
            "2017-06-01 07:58:50.0",
            "984",
            "45113694289302",
            "45113694289302",
            "34546789606976",
            "410-07-511-19601",
            "1",
            "1",
            "1"
        ],
        [
            "3028540439",
            "3224712938",
            "2017-05-11 06:07:21.0",
            "4",
            "12962129644848",
            "12962129644848",
            "34469708781694",
            "410-06-651-30213",
            "1",
            "1",
            "1"
        ]
    ],
    "success": true,
    "error": "no error"
}

After making this call, The response from server comes but response doesn't populate into datatable. It Shows me this error

DataTables warning: table id=call_analysis_basic_table - no error

Any hint, How can I populate this JSON response to my datatable?

Normally in my response JSON objects I have keys with the data, are you sure it can be populated like this, relying only on the order of the element so it can be binded? And not having something like : { "ANUMBER": "3028540439", "BNUMBER": "3222027076", // and so on } — Samuil Petrov
– Samuil Petrov, Commented Aug 11, 2017 at 11:56
I need to populate datatable with this response. To change this, Its a very big headache :( — Noob Player
– Noob Player, Commented Aug 11, 2017 at 12:02
check my answer below and you only need the result key from the response Object. — Niladri
– Niladri, Commented Aug 11, 2017 at 12:16

Niladri · Accepted Answer · 2017-08-11 12:14:46Z

0

You don't have to use the "columns" property here as you are loading the datatable from an array only not from a proper JSON response. Also you have 10 columns in the table but 11 items in each array which will not work. The number of items in array should be same as columns in the table if you are using array to populate the table. Try with the below code -

$('#call_analysis_basic_table').DataTable ({
    "ajax": {
        "url": "getBasicCallAnalysisData.json",
        "type": "POST"
    }
});

Also your datasource array should be like below -

{
    "result": [
        [
            "3028540439",
            "3222027076",
            "2017-06-01 07:58:50.0",
            "984",
            "45113694289302",
            "45113694289302",
            "34546789606976",
            "410-07-511-19601",
            "1",
            "1",
            "1"
        ],
        [
            "3028540439",
            "3224712938",
            "2017-05-11 06:07:21.0",
            "4",
            "12962129644848",
            "12962129644848",
            "34469708781694",
            "410-06-651-30213",
            "1",
            "1",
            "1" //extra value is here 
        ]
    ]
}

and you can add a table footer in your HTML

<table id="call_analysis_basic_table" class="display" cellspacing="0" width="100%">
    <thead style="background-color:#4d7496;color:#fff;">
        <tr>
            <th>aNumber</th>
            <th>bNumber</th>
            <th>datetime</th>
            <th>duration</th>
            <th>imei</th>
            <th>imsi</th>
            <th>cellID</th>
            <th>oprid</th>
            <th>msc_id</th>
            <th>file_id</th>
        </tr>
    </thead>
    <tfoot style="background-color:#4d7496;color:#fff;">
        <tr>
            <th>aNumber</th>
            <th>bNumber</th>
            <th>datetime</th>
            <th>duration</th>
            <th>imei</th>
            <th>imsi</th>
            <th>cellID</th>
            <th>oprid</th>
            <th>msc_id</th>
            <th>file_id</th>
        </tr>
    </tfoot>
</table>

check this link for more reference Jquery datatable ajax with array

edited Aug 11, 2017 at 12:14

answered Aug 11, 2017 at 12:09

Niladri

5,9822 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Noob Player Over a year ago

Why should I change my JSON response ?

Niladri Over a year ago

because its not a JSON response ... you don't have a key value pair in the result.It's an simple array.I provided the link for using array with datatable above.

Noob Player Over a year ago

Dear, I cant change my response here.

Niladri Over a year ago

Ok did you try with the code I provided and the same response you received earlier?

Collectives™ on Stack Overflow

Populate datatables with AJAX call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related