We Keep Coding

DataTables can't get json

I use nodejs express and I want to show user data in my datatables
javascript datables
$(document).ready(function() {
$('#dataTable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"datatype": "json",
"url": "/users",
"dataSrc": ""
},
"columns":
[
{ "data": "name" },
{ "data": "nickname" },
{ "data": "age" },
{ "data": "nicknames" }
]
})
})
json user data
{
name: "Apiphoom",
nickname: "Api",
age: "23",
test: "test"
}
html
<table class="table table-bordered" id="dataTable" >
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Test</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
but it said "No matching records found",
How can I solve it.

Sending Json data as an object into DataTables

I have been trying to use DataTables. But after my Ajax request i get a Json object which i cannot pass into dataTables.
The Json object i receive is the following
{"data": [{"attributes": {"purchasedate": "04/01/2017", "medication": "meds", "cost": 100.0, "expirydate": "04/03/2017", "quantity": 100.0}, "type": "medical_inventory"}, {"attributes": {"purchasedate": "04/01/2017", "medication": "Extra Meds", "cost": 100.0, "expirydate": "04/02/2017", "quantity": 100.0}, "type": "medical_inventory"}, {"attributes": {"purchasedate": "04/01/2017", "medication": "Extra Super Meds", "cost": 267.0, "expirydate": "04/11/2017", "quantity": 250.0}, "type": "medical_inventory"}], "links": {"self": "/medical_inventory/"}}
Following is my HTML code
<table id="myTable" class="display" cellspacing="0" width="90%">
<thead>
<tr>
<th>Medication</th>
<th>Medication Quantity</th>
<th>Mediaction Cost</th>
<th>Purchase Date</th>
<th>Expiry Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Medication</th>
<th>Medication Quantity</th>
<th>Mediaction Cost</th>
<th>Purchase Date</th>
<th>Expiry Date</th>
</tr>
</tfoot>
</table>
The Ajax request i do is the following
$(document).ready(function () {
$.ajax({
url : '/api/medical_inventory/',
type : 'GET',
dataType : 'json',
success : function(data) {
assignToEventsColumns(data);
}
});
function assignToEventsColumns(data) {
var table = $('#myTable').dataTable({
"bAutoWidth" : false,
"aaData" : data,
"columns" : [ {
"data" : "medication"
}, {
"data" : "quantity"
}, {
"data" : "cost"
}, {
"data" : "purchasedate"
}, {
"data" : "expirydate"
} ]
})
}
});
This is the output i am currently getting

You were very nearly there:
function assignToEventsColumns(data) {
var table = $('#myTable').dataTable({
"bAutoWidth": false,
"aaData": data.data,
"columns": [{
"data": "attributes.medication"
}, {
"data": "attributes.quantity"
}, {
"data": "attributes.cost"
}, {
"data": "attributes.purchasedate"
}, {
"data": "attributes.expirydate"
}]
})
}
All you were missing was the structure of your JSON, you needed to add attributes. as well as your data.data :-D.Working JSFiddle here.

Try mapping the data to remove the attributes property of each object
success : function(data) {
data.data = data.data.map(function(item){
return item.attributes;
});
assignToEventsColumns(data);
}

populating jquery datatable ajax txt file

I'm a jquery/ajax newbie and going through data table examples. I'm having problems populating the data table with txt data in eclipse. I just get a loading message. Any assistance would be appreciated.
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/object.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
/////object.txt
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},...................

In your code sample, you had the line,
"columns": [{ "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "extn" },{ "data": "start_date" },{ "data": "salary" }]
Simply change the columns to "columnDefs" which refers to the column defaults option in the datatable plugin.
And also, you are calling the data-table plugin on an id called "example" which you have not defined. So give your table an id="example"
So the final code should look like
$(document).ready(function() {
$('#example').dataTable({
"ajax": 'array.txt',
"columnDefs": [{ /* changed this */
"data": "name"
}, {
"data": "position"
}, {
"data": "office"
}, {
"data": "extn"
}, {
"data": "start_date"
}, {
"data": "salary"
}]
});
});
<link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
Now this above code snippet WILL NOT work because the path to the array.txt is wrong. Copy the array.txt file locally. Fiddle or code snippet does not allow the ajax requests through them.
Here is the sample array.txt (copied from the data table website # https://www.datatables.net/examples/ajax/data/arrays.txt )
Hope this helps. Happy coding :)
Screenshot on my local machine

Table not being filled from Ajax Call using Datatables plug-in for jQuery

The ajax request is returning the following data
[{"ID":40,"Date":"\/Date(1407999600000)\/"},{"ID":39,"Date":"\/Date(1409036400000)\/"}
The HTML is:
<table id="bookings-table" class="display">
<thead>
<tr>
<th>ID</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Date</th>
</tr>
</tfoot>
</table>
And the javascript is
$(document).ready(function () {
$('#bookings-table').dataTable({
"ajaxSource": "/manager/Booking/GetBookings",
"columns": [
{ "data": "ID" },
{ "data": "Date" }
]
});
});
Any idea why the table is not being filled

Just looking at their docs, I believe your json has to be formatted as so.
{
"data": [
{
"ID": 40,
"Date": "\/Date(1407999600000)\/"
},
{
"ID": 39,
"Date": "\/Date(1409036400000)\/"
}
]
}

Javascript error
$('#bookings-table').dataTable({
"ajax": {
"url": "/manager/Booking/GetBookings",
"dataSrc": ""
},
Sorted it all columns now bind

populate datatable from a local json file

I am trying to populate my datatable using a JSON file (jsontext.json) I tried almost all the resources but can't work this one out. I have tried all the stackoverflow resources. This question is different than the one that are posted.
If I could just get the JSON file into the my jsonObject then the rest I can figure out.
The Json file is stored in my c:\path\jsontext.json
Here is the json file
[
{
"Identifier": "1",
"Label": "pratik",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
},
{
"Identifier": "2",
"Label": "2013",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
}
]
I tried the following js code to get the file into jsonObject
var myObject;
$.ready(function(){
myObject={};
$.getJSON('http://localhost:8080/jsontext.json', function(data){
/* here I have tried using both the paths the c:\path\jsontext.json and the one above */
myObject=data;
});
});
Once i have it into the JsonObject I can use the following code to populate the datatable
$(document).ready(function(){
$('#example').dataTable
( {
"sScrollY": "200px",
"bPaginate": false,
"bScrollCollapse": true,
aaData:myObject,
"aoColumns":
[
{ "mData": "Identifier" },
{ "mData": "Label" },
{ "mData": "Categories" },
{ "mData": "UpdatedBy" },
{ "mData": "UpdatedAt" },
{ "sClass": "getimage"},
{ "sClass": "editimage"},
{ "sClass": "deleteimage"}
]
});
});
Here is my html body in my jsp page
<body id="dt_example">
<div id="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<ul>
<li> Add Code Edit</li>
<li> Import</li>
<li> Export</li>
</ul>
<tr>
<th>Identifier</th>
<th>Label</th>
<th>Categories</th>
<th>UpdatedBy</th>
<th>UpdatedAt</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
<td>Row 1 Data 5</td>
<td class="getimage"></td>
<td class="editimage"></td>
<td class="deleteimage"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
can Anyone tell me where I am going wrong.

Actually, if you see the server response in developer tools you can find the data that is received. As far as I have worked with the dataTables, the json file must contain a "key" for the whole data, otherwise it wont have any reference.
Try modifying your json as follows:
{
"mydata":[
{
"Identifier": "1",
"Label": "pratik",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
},
{
"Identifier": "2",
"Label": "2013",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
}
]
}
if you want to use the json object other than "aaData", you can use "sAjaxDataProp" of the datatable to specify the respective object.

Looks like the problem could be that your ajax is loading and setting the myObject variable but it is done after Datatables initialized so it does not get the updated myObject variable after your request has finished. You could do something like this to fix that:
var myObject;
$.ready(function(){
myObject={};
$.getJSON('http://localhost:8080/jsontext.json', function(data){
/* here I have tried using both the paths the c:\path\jsontext.json and the one above */
myObject=data;
$('#example').dataTable().fnAddData(myObject);
});
});

Thanks for the replys every one I got the answer I tried out thanks though.
var someData=JSON.parse(document.getElementById("populate-holdingBin").innerHTML);
oTables=$('#someReport').dataTable
({
"bJQueryUI":true,
"bScrollCollapse":true,
aaData:someData,
"aoColumns":
[ ...etc etc.............................. ]
});