JQuery DataTables - Not Displaying Data

I'm trying to set up jQuery DataTables. All I need is to simply show some JSON data in the table.

Here is my JS code. I know myObj is already a JSON object, but I passed in through JSON.stringify to be safe because I'm losing my mind over this.

var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
var data = JSON.stringify(myObj);

$(document).ready(function() {
    $('#table').DataTable( {
        "ordering": true,
        "data": data,
        "searching": false,
        "columns": [
          {'data':'name'},
          {'data':'age'},
          {'data':'address'},
          {'data':'city'}
        ]

    });
});

HTML Code:

  <html>
        <head>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
            <link href="assets/css/style.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" />
        </head>
    <body>
        <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>
  <script src="assets/js/dataLoader.js"></script>
    </body>
    </html>

I'm not the best at formatting, but you get the idea. The above JS code is in the dataLoader.js file. The problem is I get this dataTables error when I run the html file.

DataTables warning: table id=table - Requested unknown parameter 'name' for row 0, column 0.

I'm really confused why it doesn't know what name is. If I run console.log(data.name) it returns John. Why is it not showing the data?

Answers 1

  • The type should be an array. See the Type heading on the documentation for the data option:

    Description

    DataTables can obtain the data it is to display in the table's body from a number of sources, including being passed in as an array of row data using this initialisation parameter. As with other dynamic data sources, arrays or objects can be used for the data source for each row, with columns.data employed to read from specific object properties.

    Type

    This option can be given in the following type(s):

    array

    1

    The error you saw was the result of the datatables code attempting to work with the single object as an array of data.

    So instead of assigning the value from JSON.stringify() to data, make data an array containing myObj (and in the future, more objects could be added to that array):

    var data = [myObj];
    

    See that change applied below:

    var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
    var data = [myObj];//JSON.stringify(myObj);
    
    $(document).ready(function() {
        $('#table').DataTable( {
            "ordering": true,
            "data": data,
            "searching": false,
            "columns": [
              {'data':'name'},
              {'data':'age'},
              {'data':'address'},
              {'data':'city'}
            ]
    
        });
    });
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
                <link href="assets/css/style.css" rel="stylesheet">
                <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" />
            <table id="table" class="table table-hover">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>age</th>
                                <th>address</th>
                                <th>city</th>
                            </tr>
                        </thead>
                    </table>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                <script src="assets/js/bootstrap.min.js"></script>
                <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>


    1https://datatables.net/reference/option/data


Related Articles