Fixed Column with Dynamic Ajax data
Fixed Column with Dynamic Ajax data
panatapattu
Posts: 3Questions: 1Answers: 0
Hi,
I am having a question. I need to use Fixed Column data table in my project. Therefore I need to get body data dynamically from Ajax.
Here is my HTML code,
| First name | Last name | Position | Office | Age | Start date | Salary | Extn. |
|---|
My JS code,
$('#example').DataTable({
scrollY: "300px",
scrollX: true,
"ajax": getJsonData(),
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1
},
scrollX:true,
"paging": false,
"bFilter": false,
"bInfo": false,
"searching": false,
"bSort" : false
});
Get data function,
function getJsonData() {
$.ajax({
url: "json data url",
type: "GET",
success: function (data) {
loadJsonData(data);
},
error: function (request, status, error) {
// error
}
});
}
My guide data function,
function loadJsonData(data) {
var obj = data;
obj.xxx.forEach(function(item) {
var element = $('<tr><td><div class="gc" data-url="'+ item.livelink +'"><img src="' + item.image + '"></div></td></tr>');
if(item.other)
{
item.other.forEach(function(otherItem) {
if(otherItem.url != "0" && otherItem.title != "")
{
var otherElement = $('<td><div class="gc" data-ourl="'+ otherItem.url +'"><p>' + otherItem.title + '</p></div></td>');
element.append(otherElement);
}
else if(otherItem.url != "0")
{
var otherElement = $('<td><div class="gc" data-url="'+ otherItem.url +'"><p>' + otherItem.time + '</p></div></td>');
element.append(otherElement);
}
else
{
var otherElement = $('<td><div class="gc" data-url="'+ otherItem.url +'"><p>' + otherItem.time + '</p></div></td>');
element.append(otherElement);
}
});
}
$("#example tbody").append(element);
});
Can anybody help me with this, to solve this out..?
Many Thanks
This question has an accepted answers - jump to answer
Answers
See the FAQs. You cannot use
appendwith a DataTable after the DataTable has been created. You must use the API.If that is not the issue, then please give a link to a test case as required in the forum rules.
Allan
Hi Allan,
Thanks for your reply and I found a way to solve my previous problem.
I have another problem. In my project I am loading data from server side. Now it is perfectly working fine. But I am having another problem now.
What I am doing here is I have a <select> <option> panel. So, once I change the option I need to remove current content and load different content to the table. I am getting data from ajax call and loading to the table. The second time when I change the option, it is giving me this error.
DataTables warning: table id=xxx - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
I checked the URL given but there is no good sound for me.
How can I fix this..?
Are you using the
ajaxoption to load the data into the table? If so, then useajax.reload()orajax.url().load()to load new data.If you are not using the Ajax options then use
rows().remove()to delete the old rows androws.add()to add new rows.Allan
Hi Allan,
This is the function I am calling when change the value using <select> <option>
function myContent(id3) {
}
I would suggest calling the
draw()method on change (which will reload the display since you are using server-side processing).Allan