Why my dataTables does not appear using $.each inside function?
Why my dataTables does not appear using $.each inside function?
![mastersuse](https://secure.gravatar.com/avatar/0ec8ad0ffdc249593b36fdd6e7665700/?default=https%3A%2F%2Fvanillicon.com%2F0ec8ad0ffdc249593b36fdd6e7665700_200.png&rating=g&size=120)
I have nested array json object (Layer 1, Layer 2 and Layer 3). My problem is dataTables **features ** such as search box and pagination does not appear. Any related CDN has been imported. The table just only display standard table. I have referred many websites, but it did not solve my problem.
JSON
{
"status": "Success",
"data": [{
"project_id": "1",
"project_name": "project name",
"l1_task": [{
"l1_id": "1",
"l1_name": "Layer 1",
"l2_task": [{
"l2_id": "1",
"l2_name": "Layer 2",
"l3_task": [{
"l3_id": "1",
"l3_name": "Layer 3.1"
},
{
"l3_id": "2",
"l3_name": "Layer 3.2"
}
]
}]
}]
}]
}
JS
$(document).ready(function() {
loadtable();
$('#Layer3Table').DataTable({
ajax: {
url: "exampleData/activity.json"
},
columns: [{
data: "l1_task.0.l2_task.0.l3_task.0.l3_id"
},
{
data: "l1_task.0.l2_task.0.l3_task.0.l3_name"
}
],
});
function loadtable() {
var project = '';
$.ajax({
url: "exampleData/activity.json",
crossDomain: true,
type: 'POST',
dataType: 'json',
data: "data",
success: function(response) {
if (response.status == "Success") {
// Layer 1 array object
$.each(response.data[0].l1_task, function(key, value) {
project +=
"<div>" +
"<div>";
// Layer 2 array object
$.each(value.l2_task, function(key1, value1) {
project +=
"<div>" +
"<div>" +
// Layer 3 array object
"<div class='table-responsive'>" +
"<table id='Layer3Table' class='table table-striped' style='width:100%'>" +
"<thead>" +
"<tr>" +
"<th class='text-center'>ID</th>" +
"<th class='text-center'>Activity Name</th>" +
"</tr>" +
"</thead>";
$.each(value1.l3_task, function(k, v) {
project +=
"<tr>" +
"<td>" + v.l3_id + "</td>" +
"<td>" + v.l3_name + "</td>" +
"</tr>";
}); // for Layer 3
project +=
"</table>" +
"</div>"+
"</div>" +
"</div>";
}); // for Layer 2
project += "</div>" + "</div>";
}); // for Layer 1
$("#projectDetail2").append(project);
} else {}
},
error: function(e) {}
});
}
});
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Everything looks like it should work. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
This is the test case, but have many errors when paste the code here.
live.datatables.net/robinoya/2/edit
Why are you doing both the
loadtable()
function and usingajax
in the Datatable config? This is causing the table data to be fetched twice and built twice.The conflict might be the problem. Try commenting out the
loadtable()
call in line 3 to see if Datatables now works.EDIT: If you still have problems look in the browser's console for errors. Do you get any?
Kevin
I already commented the first
loadtable();
, the problem whenloadtable();
is commented, it is unable to displayfunction loadtable(){....}
which consist of my nested layer as posted image above.Both Datatables and
loadtable()
are duplicating the effort of fetching the data and populating the table. If you prefer to useloadtable()
to build the table then remove this code:And initialize Datatables after you build the table, for example:
Datatables will initialize using the DOM sourced table.
Kevin
You are brilliant!! Thank so much. I just add only that and solved my problem. thanks again.. May god bless you.
I just checking, have another problem, why only datatables is reflect at 1 place only?
I thought it is looping as I need it to be looping to another Layer 3 tables.
If you are using
$('#Layer3Table').DataTable();
then the HTMLid
its going to attach to isLayer3Table
. You can only have one HTMLid
on a page. Each of your tables should have a uniqueid
.Here is an example of using Datatables with multiple tables:
https://datatables.net/examples/basic_init/multiple_tables.html
Kevin
Thank you again. This answer solved my problem.