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.

Answers 1

  • 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


Related Articles