CODEWITHSUNDEEP
javascriptjquerydatatable
BAA
BAA

Reputation: 55

Could not load Datatable with JSON objects

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.

Upvotes: 0

Views: 845

Answers (2)

thecassion
thecassion

Reputation: 546

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 : enter image description here

Upvotes: 2

Ashan
Ashan

Reputation: 479

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" }
            ]
        } );
    }

Upvotes: 0

Related Questions