Show JSON Data in Jquery Datatables - javascript

I've been trying to get my JSON data in jQuery DataTables component.
First I wrote the JavaScript code as well as a view as shown in the code below:
$(document).ready(function () {
$('#myData').DataTable({
lengthChange: false,
ajax: {
url: "http://amp-local/api/wipbin/FetchChild/",
// dataSrc: 'allk'
},
columns: [
{ data: "name" },
{ data: "numbers" }
],
select: true
});
});
My view:
<table id="myData" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Numbers</th>
</tr>
</thead>
</table>
My JSON:
[{
"numbers": "38",
"name": "Bllaca"
}, {
"numbers": "28",
"name": "Kaess"
}, {
"numbers": "27",
"name": "droessmer"
}, {
"numbers": "24",
"name": "friedricha"
}]
Result is with this error:
TypeError: undefined is not an object (evaluating 'f.length')
And my table is empty.

When using server-side processing with AJAX requests, it expects JSON data to be returned in the special format required by DataTables. The following fields of JSON response object are required: draw, data, recordsTotal and recordsFiltered. You need to bring your server response into accordance with expected format.
For example, your first response should be as following:
{
"draw": 1,
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{
"numbers": "38",
"name": "Bllaca"
}, {
"numbers": "28",
"name": "Kaess"
}, {
"numbers": "27",
"name": "droessmer"
}, {
"numbers": "24",
"name": "friedricha"
}
]
}

Related

How to load a jQuery.DataTables grid with dynamic JSON data

I'm trying to load some simple JSON data into a jQuery.DataTables (datatables.net), The grid is showing up as it is defined in the HTML, but does not change based on the new data.
What am I missing? any suggestion?
HTML:
<table id="example" class="display" style="width:100%;">
<thead>
<tr>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
</tr>
</tbody>
JavaScript: (jQuery and jQuery.DataTables are loaded)
$(document).ready(function () {
$("#example").DataTable({
data: [{ Id: "1" }, { Id: "2" }],
columns: { data: "Id", title: "ID" }
});
});
Your column data should be set of Array. Something like this
$(document).ready(function () {
$("#example").DataTable({
data: [{ Id: "1" }, { Id: "2" }],
columns: [{ data: "Id", title: "ID" }]
});
});
For Dynamic Data using ajax
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
JSON txt file
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}
More detail Here
Try this
var options = {
data: [{ Id: "1" }, { Id: "2" }],
columns: { data: "Id", title: "ID" }
}
var dataTable = $("#example").DataTable(options );
// Reload and refresh
dataTable.draw();
So, the my code for injecting the JSON data (or as a variable) is fine, the problem was another click event for the grid that I forgot I added before the initialization of that grid (bad bad me)
$("#example " + "tbody").on("click", "tr", function () {
var data = table.row(this).data();
isDebug && console.log('You clicked on ' + data[0] + '\'s row');
isDebug && console.log(data);
});

Jquery dataTable handle json data with pagination

First, I have data from url like this GET /api/fruit?per_page=10&page=1 and this is what I got :
{
"data": [
{
"id": "1",
"name": "Orange",
"price": "200"
},
{
"id": "2",
"name": "Manggo",
"price": "300"
},
...(display 10 data)
],
"meta": {
"pagination": {
"total": 69487,
"count": 10,
"per_page": 10,
"current_page": 1,
"total_pages": 4633
}
}
}
Then I following this code fiddle and success render data, and pagination work as well. But input search not working. My question is how to use jquery dataTable properly with data from api like this GET /api/fruit?per_page=10&page=1

Rendering DataTable rows from json file

I am trying to render DataTable-rows from a json file, placed on the same directory. But unfortunately, the DataTable-Body stays empty, and no error is displayed in the console.
Here is the (reduced) HTML-Code:
<table id="opTable">
<thead>
<tr><th class="partner_id">ID</th><th>ShortName</th><th>DisplayName</th><th>LogoUrl</th><th>Incent</th><th>JTS-URL</th></tr>
</thead>
<tbody>
</tbody>
</table>
Here is the JavaScript I am using to load the data from the json file:
<script>
$(document).ready(function() {
$('#onlinePartnerTable').DataTable({
"ajax" : "../test2.json",
"columns": [{
"data": "pId"
}, {
"data": "shrName"
}, {
"data": "DplayName"
}, {
"data": "lgo"
}, {
"data": "inc"
}, {
"data": "featured"
}]
});
});
</script>
and here is a sample of my json file:
{
"partnerList": [
{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [
{
"heady": "",
"body": ""
}
]
}
},
{
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [
{
"heady": "",
"body": ""
}
]
}
}
]
}
I am becomming this error now.. See the image below.
try this
var t = [{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [{
"heady": "",
"body": ""
}]
}
}, {
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [{
"heady": "",
"body": ""
}]
}
}];
$(document).ready(function() {
$('#opTable').DataTable({
"aaData": t,
"columns": [{
"data": "pId"
}, {
"data": "shrname"
}, {
"data": "Dplayname"
}, {
"data": "lgo"
}, {
"data": "inc"
}, {
"data": "featured"
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="opTable">
<thead>
<tr>
<th class="partner_id">ID</th>
<th>ShortName</th>
<th>DisplayName</th>
<th>LogoUrl</th>
<th>Incent</th>
<th>JTS-URL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Based on one of the links Turnip provided in the comments, Datatables Ajax Data Source (objects), your data should look like this:
{
"data": [
{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
},
{
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
}
]
}
I'm not sure what you're trying to do with the "dets" part of your data though

fill json data in html dynamically

I want to fill a table from a json file using AngularJS.
json file may vary from time to time (dynamic data).
Requirement is: Fill the table in html by parsing json file.
Table is in view.html file and AngularJS code should be in view.js.
JSON file: (there may be even more no of id's under services tree)
{
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
The output table should look like:
PS: the table alignment should be set as the name value may or may not has more info.
Thanks
Although, like #Johannes Jander saying, Stackoverflow is not a "write my code for me" service I will show you how to do this.
If you don't mind that the order of the columns will be different, you can easily iterate throw the object's properties and you wouldn't need to manipulate the json object. If the order is important, let me know and I will help you to figure it out.
To read more about what we have here please follow those links:
ng-repeat docs.
How can I iterate over the keys, value in ng-repeat in angular
Now, to the code:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.json = {
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
});
table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
<table data-ng-if="json.result.services.length > 0">
<thead>
<tr>
<th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="service in json.result.services">
<td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td>
</tr>
</tbody>
</table>
</div>

Populate javascript.datatables with json?

I am trying to have a javascript.datatable (http://www.datatables.net/) show a dataset which I have passed through as a json string.
$(document).ready(function () {
$('#Reports').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="ReportsTable"></table>');
var data = <%=jsonResult%>;
$('#ReportsTable').dataTable({
"data": data,
"columns": [
{ "title": "id" },
{ "title": "name" },
{ "title": "regAndId" },
{ "title": "type" },
{ "title": "timeStamp" }
]
});
});
My jsonResult or data variable looks as follows:
{
"reports": [
{
"id": "421b4b9b-63d5-4fe2-a929-a85d9fe9d2ef",
"name": "TAMANYA PROPERTIES",
"regAndId": "1989/011313/23",
"timeStamp": "2014/10/31 01:57:51 PM",
"type": "Company"
},
{
"id": "56751c5d-84b2-463a-95be-9feb2fa02c10",
"name": "TESTA PROPERTY COMPANY PTY",
"regAndId": "1980/004250/07",
"timeStamp": "2014/10/31 10:29:09 AM",
"type": "Company"
}
]
}
The error I am getting is:
Uncaught TypeError: undefined is not a function
This could happens if the DataTable library is not loaded properly. First jQuery should be loaded and then dataTables.
Assuming you have properly included both jQuery and DataTables libraries, you need to configure the columns according to your data structure. Something like this should work for you:
$(document).ready(function () {
$('#Reports').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="ReportsTable"></table>');
var data = {
"reports": [
{
"id": "421b4b9b-63d5-4fe2-a929-a85d9fe9d2ef",
"name": "TAMANYA PROPERTIES",
"regAndId": "1989/011313/23",
"timeStamp": "2014/10/31 01:57:51 PM",
"type": "Company"
},
{
"id": "56751c5d-84b2-463a-95be-9feb2fa02c10",
"name": "TESTA PROPERTY COMPANY PTY",
"regAndId": "1980/004250/07",
"timeStamp": "2014/10/31 10:29:09 AM",
"type": "Company"
}
]
};
$('#ReportsTable').dataTable({
"data": data.reports,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "regAndId" },
{ "data": "type" },
{ "data": "timeStamp" }
]
});
});
See demo
Try change this
var data = <%=jsonResult%>;
to
var data = '<%=jsonResult%>';
Note the quotes.
This is needed as the content you are assigning is expecting json string and not just an object/function.

Categories

Resources