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=".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=".12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src=".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?
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/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./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/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?
3 Answers
Reset to default 7The 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/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./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/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/reference/option/data
- 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./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables/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>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'}
]
});