Searching Sorting on Dynamic Data
Searching Sorting on Dynamic Data
I have a DataTable where I need to insert/append data dynamically from an AJAX call. Searching and Sorting on this kind of DataTable does not seem to work as intended. Here is my JSFiddle. Please Suggest any solutions or answers on this issue.
Code:
$('#example').DataTable( {
"iDisplayLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaData": md,
"aaSorting": [[1, 'asc']],
"createdRow": function (row, data, index) {
$('td', row).eq(0).append('<u><a target="blank" href="' + data["Data"][0].Link + '">' + data["Data"][0].Value + '</a></u>');
$('td', row).eq(1).append(data["Data"][1].Value);
$('td', row).eq(1).prop('title', data["Data"][1].Value);
for (var i = 2; i < data["Data"].length; i++) {
if (data["Data"][i].Value == "green") {
$('td', row).eq(i).addClass('highlight1');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else if (data["Data"][i].Value == "red") {
$('td', row).eq(i).addClass('highlight3');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else if (data["Data"][i].Value == "blue") {
$('td', row).eq(i).addClass('highlight2');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else{
$('td', row).eq(i).append(data["Data"][i].Value);
}
}
},
"scrollX": true,
"scrollCollapse": true,
"fixedColumns": {
"leftColumns": 2,
},
"sScrollXInner": "150%",
"fixedHeader": true,
"columnDefs": [{
"defaultContent": "",
"targets": "_all",
"data": null,
"render": {
// "":spData[0].Cells[2].Value,
}
}],
} );
Answers
Answered this question here- https://datatables.net/forums/discussion/36214/datatable-searching-and-sorting-not-working-on-dynamically-loaded-data?new=1
Please don't post duplicates in the future.
Thanks
Tom