DataTables Not Displaying Single Row
DataTables Not Displaying Single Row
Amaredues
Posts: 5Questions: 2Answers: 0
Ok so I've set up DataTables to retrieve data from a server using an ajax call. The data is sent as a json file. All the rows and data is properly displayed only when there is more than one row of data being sent. When I only have one object in the JSON file, no data is displayed. I don't understand why DataTables isn't reading the row of data when only one data object is sent.
The HTML code is as follows:
<html lang="en">
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> -->
<!-- <script type="text/javascript" src="../external/angular-datatables-master/src/angular-datatables.js"></script> -->
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<!-- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"> -->
<!-- DataTables Table Tools -->
<script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Datepicker -->
<link rel="stylesheet" type="text/css" href="../external/bootstrap-datepicker-1.4.0/css/bootstrap-datepicker.standalone.min.css">
<script type="text/javascript" src="../external/bootstrap-datepicker-1.4.0/js/bootstrap-datepicker.min.js"></script>
<!-- Custom -->
<link rel="stylesheet" type="text/css" href="../css/main.css">
...
<!-- DataTables display -->
<div class="table-wrapper">
<table id="locTable" class="table table-striped table-bordered center dTables">
<thead>
<tr>
<th>Partner</th>
<th>Connection</th>
<th>Location ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
DataTables initialization:
$(document).ready(function() {
// Initialize the proper table
iniLocTable(locTable);
});
function iniLocTable(tableId) {
var table = $(tableId).DataTable( { // dataTable is old school, use table.api().* to use newer DataTable api
// Settings
"ajax": "/services/LogService/locations",
"sAjaxDataProp": "dcgReport",
"columns": [
{'data': 'locName'},
{'data': 'adapterName'},
{'data': 'locId'}]
} );
}
Dummy json file:
{"dcgReport":{"adapterName":"N/A","divDesc":"N/A","divId":"N/A","locId":"N/A","locName":"N/A","propId":"N/A","propName":"N/A"}}
Working json file:
{"dcgReport":[{"adapterName":"N/A","divDesc":"N/A","divId":"N/A","locId":"N/A","locName":"N/A","propId":"N/A","propName":"N/A"},{"adapterName":"N/A","divDesc":"N/A","divId":"N/A","locId":"N/A","locName":"N/A","propId":"N/A","propName":"N/A"}]}
jsfiddle set up: https://jsfiddle.net/Amaredues/nyk98nof/1/
Debug error code: http://debug.datatables.net/equtik
Working debug error code: http://debug.datatables.net/usudup
The first debugger shows that there are no rows in table even though there is 1 object being sent.
Any help is greatly appreciated!
This question has an accepted answers - jump to answer
Answers
This is a legacy property. use
ajax.dataSrcif you are using the new styleajaxoption:Allan
Hi Allan, thanks for taking a look.
I've changed it to
ajax.urlandajax.dataSrcand removedEverything still works the same as before. I still get shown
I check the debugger once more and it shows no rows in table. http://debug.datatables.net/uzomex
You want your JSON to be an array of objects. Something like:
At the moment you only have an object in your
errorReportobject which is not supported by DataTables.Allan
That has solved my problem. Thanks Allan!