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.............................. ]
});
Related
I have an HTML table which is being populated by a JSON (ajax call). In the Edit and Delete columns of the table I need to have an icon to edit or delete the data on each row.
I don't know how to add the icon when the table is populated by the JSON.
Following is my code:
//JSON which is populating the table. Register.js
$(document).ready(function() {
var allRegister = AjaxCall(apiUrl, mthdGetReleasesFullList, null,
{
});
var data=allRegister.responseText;
alert("testing"+ data);
var jsonResponse = JSON.parse(data);
//var table = $('#contact-data').DataTable({
var table = $('#register-data').DataTable({
"data": jsonResponse.data,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": "DivisionID" },
{ "data": "StatusID" },
],
"order": [[1, 'dsc']]
});
});
Html code for table:
<link rel="stylesheet" href="entity/Register/css/Register.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page specific JS -->
<script src="entity/Register/js/Register.js"></script>
<div class="container-full">
<div class="heading-1">
<input type="button" id="btn-AddUser" value="Add Release" style="font-size:14px;color:teal;text-align: left">
<h1>
</h1>
<div class="modular-box-text inset">
<div class="retgister-table-holder">
<h2>Pre-Release Access Register:</h2>
<br>
<div class="register-table" >
<table id="register-data"class="display tablesorter" role="grid" aria-describedby="example_info" style="width: 100%;" cellspacing="0">
<thead>
<tr>
<th>ReleaseID</th>
<th>ReleaseName</th>
<th>DivisionID</th>
<th>StatusIDth>
<th>Edit<th>
<th>Delete </th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
You need to work with the render option of the columns objects - documentation here. When you specify the targeted ID of your desired action (i presume it is ReleaseID) you just create more columns with that ID as data object and adjust the column renderer by giving it a custom render method. Since you specified ReleaseID as data, you can re-use that value in the render method as first argument.
In the example below you can see how to achieve this - You can very easily replace Edit and Delete text with <img /> tags referencing the icons you want to have for each action.
// Faking a request
var response = [
{ "ReleaseID": "1",
"ReleaseName": "Release A",
"DivisionID": "10",
"StatusID": "1"
}, {
"ReleaseID": "2",
"ReleaseName": "Release B",
"DivisionID": "9",
"StatusID": "2"
}, {
"ReleaseID": "3",
"ReleaseName": "Release C",
"DivisionID": "9",
"StatusID": "1"
}, {
"ReleaseID": "4",
"ReleaseName": "Release D",
"DivisionID": "10",
"StatusID": "2"
}, {
"ReleaseID": "5",
"ReleaseName": "Release E",
"DivisionID": "11",
"StatusID": "1"
}];
$(document).on('ready', function() {
$('#register-data').dataTable({
"data": response,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": "DivisionID" },
{ "data": "StatusID" },
{
"data": "ReleaseID",
"render": (data, type, row, meta) => `Edit`
}, {
"data": "ReleaseID",
"render": (data, type, row, meta) => `Delete`
}
],
"order": [[1, 'dsc']]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="register-data"class="display tablesorter" role="grid" aria-describedby="example_info" style="width: 100%;" cellspacing="0">
<thead>
<tr>
<th>ReleaseID</th>
<th>ReleaseName</th>
<th>DivisionID</th>
<th>StatusID</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Thanks for your response.
I used the following to get Edit and Delete buttons to appear on all rows of table
var table = $('#register-data').DataTable({
"data": jsonResponse.data,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": "DivisionID" },
{ "data": "StatusID" },
{"data":null, "defaultContent": "<button class='btn-Edit'>Edit</button>"},
{"data":null, "defaultContent": "<button class='btn-Delete'>Click!</button>"},
],
"order": [[1, 'dsc']]
});
I am trying to pouplate datatable with data from the server but its generating non existent td which I have not defined.
Javascript
$('.datatable-basic').DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": base_url + 'leave/DraftJSON/'
},
"columns": [
{ "data": "name" },
{ "data": "sd" },
{ "data": "end" },
{ "data": "id"}
]
});
HTML:
<table class="table datatable-basic" >
<thead>
<tr>
<th>Leave</th>
<th>Start</th>
<th>End</th>
<th class="text-center" col="2">Actions</th>
</tr>
</thead>
</table>
Ajax Request Response:
{"data":[{"id":"2","uid":"2","lid":"2","sd":"21 June, 2017","stod":"Afternoon","end":"21 June, 2017"
,"etod":"Afternoon","reason":"ddada","rid":"1","draft":"0","name":"Compassionate","person":"Ms. Ochieng
, Alphonc O"},{"id":"3","uid":"1","lid":"4","sd":"2017\/06\/20","stod":"Morning","end":"2017\/06\/22"
,"etod":"Afternoon","reason":"qeqeqeq","rid":"1","draft":"0","name":"Paternity","person":"Ms. Ochieng
, Alphonc O"}]}
HTML generated by DataTable:
<tbody>
<tr class="odd" role="row">
<td class="sorting_1">Compassionate</td>
<td>21 June, 2017</td>
<td>21 June, 2017</td>
<td>2</td>
<td></td> //non-existent
<td></td> //non-existent
</tr>
<tr class="even" role="row">
<td class="sorting_1">Paternity</td>
<td>2017/06/20</td>
<td>2017/06/22</td>
<td>3</td>
<td></td> //non-existent
<td></td> //non-existent
</tr>
</tbody>
The commented tds are extra sadded by datatable which then produces an error. Any insights?
It works here as you wish.
When I tried to beautify your json file json formatter gived me an error in person property. I removed invalid character in person property and prepared plunker with your json data.
{
"data":
[
{
"id":"2",
"uid":"2",
"lid":"2",
"sd":"21 June, 2017",
"stod":"Afternoon",
"end":"21 June, 2017",
"etod":"Afternoon",
"reason":"ddada",
"rid":"1",
"draft":"0",
"name":"Compassionate",
"person":"Ms. Ochieng, Alphonc O"
},
{
"id":"3",
"uid":"1",
"lid":"4",
"sd":"2017\/06\/20",
"stod":"Morning",
"end":"2017\/06\/22",
"etod":"Afternoon",
"reason":"qeqeqeq",
"rid":"1",
"draft":"0",
"name":"Paternity",
"person":"Ms. Ochieng, Alphonc O"
}
]
}
//jquery
$('.datatable-basic').DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": 'data.json'
},
"columns": [
{ "data": "name" },
{ "data": "sd" },
{ "data": "end" },
{ "data": "id"}
]
});
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);
}
Here is my angular code
$scope.StartCPU = function () {
//Initialize the Timer to run every 1000 milliseconds i.e. one second.
$scope.GetCPUData = $interval(function(){
$http.get('http://localhost:3034/api/test/metrics').
success(function(data, status, headers, config) {
$scope.Details = data;
});}, 1000);
};
Html code as follows
<div ng-controller="HttpGetController">
<button ng-click="StartCPU()">Get All Data</button>
<h1>CPU data</h1>
<pre>{{Details | json}}</pre>
</div>
I am getting the response as below
{
"data": [
{
"_id": "57ee5641931b429431085fc4",
"system": 0.06249,
"process": 0.0091652,
"timestamp": "2016-09-30T12:10:40.780Z",
"__v": 0,
"createdAt": "2016-09-30T12:10:41.927Z"
}
]
}
Now I want to access the value of the keys "system" and "process". How can I do it?
data.data[0].system
and data.data[0].process
Explanation: Here your data is an Object with property data.
//complete thing is your response data
{
"data": [ // data.data <--array
{ // data.data[0] <--first object of the array
"_id": "57ee5641931b429431085fc4",
"system": 0.06249,// data.data[0].system <--its property
"process": 0.0091652,
"timestamp": "2016-09-30T12:10:40.780Z",
"__v": 0,
"createdAt": "2016-09-30T12:10:41.927Z"
}
]
}
In your data object that you get from the call, you have the propertydata which is an array
You should then call the first element of the array
data.data[0]
Which will return you
{
"_id": "57ee5641931b429431085fc4",
"system": 0.06249,
"process": 0.0091652,
"timestamp": "2016-09-30T12:10:40.780Z",
"__v": 0,
"createdAt": "2016-09-30T12:10:41.927Z"
}
Then you call the elements that you need
data.data[0].system
data.data[0].process
It means it returns an array, may you can use something like this:
<table class="table datatable">
<thead>
<tr>
<th>system</th>
<th>process</th>
</tr>
</thead>
<tbody ng-repeat="detail in Details">
<tr>
<td>{{detail.system}}</td>
<td>{{detail.process}}</td>
</tr>
</tbody>
</table>
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