Menu
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>
<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?
982
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.dataemployed to read from specific object properties.Type
This option can be given in the following type(s):
array | Type 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
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
