Could not load Datatable with JSON objects

Question

I am trying for pagination from dynamic data. I started using Datatable but I am not able to load Datatable with JSON Objects. Please find my code below:

function drawTable(data) {

   $('#t01').DataTable( {
         ajax: {
        "aaData": data,
        "dataSrc": ""
        },
        "aoColumns": [
            { "mdata": "UserName" },
            { "mdata": "AppName" },
            { "mdata": "OS" },
            { "mdata": "Changes" },
            { "mdata": "Time" }
        ]
    } );
}

My JSON:

[{
    "UserName": "testUser",
    "AppName": "mtv_app",
    "OS": "android",
    "Changes": "tveEnabled : true to false, ",
    "Time": "2016-03-22 11:36:09"
}, {
    "UserName": "testUser",
    "AppName": "mtv_app",
    "OS": "android",
    "Changes": "tveEnabled : false to true, ",
    "Time": "2016-03-22 11:44:11"
},..

My html page:

<table id="t01" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>UserName</th>
                <th>AppName</th>
                <th>OS</th>
                <th>Changes</th>
                <th>Time</th>

            </tr>
        </thead>  
    </table>

The table is not getting loaded but loading ... appears in table. I have checked, JSON is in correct format.

I edited my code:

function drawTable(data) {
    console.log(data);
   $('#t01').DataTable( {
        "processing" : true,
        "data": data,
        "columns": [
            { "data": "UserName" },
            { "data": "AppName" },
            { "data": "OS" },
            { "data": "Changes" },
            { "data": "Time" }
        ]
    } );
}

and now my table is loaded with blank columns and I am getting error as: DataTables warning: table id=t01 - Requested unknown parameter 'UserName' for row 0, column 0.

@KartikeyaKhosla: I am not getting any errors in the console :( — BAA
– BAA, Commented Mar 25, 2016 at 4:32

thecassion · Accepted Answer · 2016-03-25 06:56:33Z

2

Your code work fine for me. This is how I used it : first : I create a json.php who contains the following code :

[{
    "UserName": "testUser",
    "AppName": "mtv_app",
    "OS": "android",
    "Changes": "tveEnabled : true to false, ",
    "Time": "2016-03-22 11:36:09"
}, {
    "UserName": "testUser",
    "AppName": "mtv_app",
    "OS": "android",
    "Changes": "tveEnabled : false to true, ",
    "Time": "2016-03-22 11:44:11"
}]

After I create an other page test.php with these following codes :

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://www.datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="t01" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>UserName</th>
                <th>AppName</th>
                <th>OS</th>
                <th>Changes</th>
                <th>Time</th>

            </tr>
        </thead>  
    </table>
</body>
<script type="text/javascript">
function drawTable(data) {
    console.log(data);
   $('#t01').DataTable( {
        "processing" : true,
        "data": data,
        "columns": [
            { "data": "UserName" },
            { "data": "AppName" },
            { "data": "OS" },
            { "data": "Changes" },
            { "data": "Time" }
        ]
    } );
}
    $(document).ready(function() {
                 $.ajax({
                    url: "json.php",
                    dataType: "json",
                    success: function(data) {
                        drawTable(data);
                    }
                });
    });
</script>
</html>

And this is the result :

answered Mar 25, 2016 at 6:56

thecassion

5461 gold badge7 silver badges19 bronze badges

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

5 Comments

BAA Over a year ago

I am not sure why, but when I parsed the JSON and used JSON Objects as input (data in my function), it worked completely fine.

thecassion Over a year ago

Oh I don't see where the problem was becaause I didn't have your full code

thecassion Over a year ago

You didn't pass the JSON to the function?

BAA Over a year ago

I passed JSON String and did not pass JSON Object.

thecassion Over a year ago

Ok I understand the trouble that you had.

Ashan · Accepted Answer · 2016-03-25 05:06:03Z

0

try this, i think this useful

 function drawTable(data) {
        console.log(data);
       $('#t01').DataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "bFilter" : false,
            "sAjaxSource": "data.php",//your data source
            "columns": [
                { "data": "UserName" },
                { "data": "AppName" },
                { "data": "OS" },
                { "data": "Changes" },
                { "data": "Time" }
            ]
        } );
    }

answered Mar 25, 2016 at 5:06

Ashan

4797 silver badges28 bronze badges

Collectives™ on Stack Overflow

Could not load Datatable with JSON objects

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related