JQuery DataTables - Not Displaying Data

Question

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?

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2018-09-07 23:46:40Z

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 | Type ¹

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>

¹_{https://datatables.net/reference/option/data}

jagdish.narkar · Accepted Answer · 2017-03-07 03:19:33Z

The data wasn't in array.
You don't have to stringify, it is already in string.

Here is the working example:

var myObj = [{ "name":"John", "age":31, "address":"123 Street","city":"New York" }];


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

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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>
 
 <table id="table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                            <th>address</th>
                            <th>city</th>
                        </tr>
                    </thead>
                </table>

Luong Dinh · Accepted Answer · 2017-03-07 03:22:18Z

0

Could you try this:

var myObj = [{ "name":"John", "age":31, "address":"123 Street","city":"New York" }];
$(document).ready(function() {
$('#table').DataTable( {
    "ordering": true,
    "data": myObj, //should be an object.
    "searching": false,
    "columns": [
      {'data':'name'},
      {'data':'age'},
      {'data':'address'},
      {'data':'city'}
    ]

});

edited Mar 7, 2017 at 3:22

answered Mar 7, 2017 at 3:05

Luong Dinh

5694 silver badges17 bronze badges

2 Comments

menix Over a year ago

Hey! Thanks for replying. Yeah I tried that and it returns with 'No data available in the table'.

Luong Dinh Over a year ago

Sorry I just read a document and try it again. Above code is tested. it worked.

Collectives™ on Stack Overflow

JQuery DataTables - Not Displaying Data

HTML Code:

3 Answers 3

Description

Type

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML Code:

3 Answers 3

Description

Type

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related