How do I do a simple rowCallback to highlight a row when using an ajax call
How do I do a simple rowCallback to highlight a row when using an ajax call
vansin
Posts: 15Questions: 4Answers: 0
in DataTables
$(document).ready(function () {
var table = $('#logistics').DataTable({
ajax: {
url: '?handler=display',
data: {},
dataSrc: ''
},
"rowCallback": function (row, data) {
$('td:eq(1)', row).html('<b>A</b>');
},
columns: [
{
data: 'logisticsId'
},
{
data: 'shipWeek',
},
{
data: 'shipDate'
}
]
});
})
This question has accepted answers - jump to:
Answers
Take a look at this example. The functionality of
createdRowandrowCallbackare the same. The difference iscreatedRowruns once whererowCallbackruns each time the row is rendered. UsecreatedRowif the data doesn't change or if it can change then userowCallback.Kevin
Thanks. I have looked at many examples including the one you suggested but I am missing something. It all works fine in the examples I find but when I try and use createdRow or rowCallback it in combination with Ajax to get the table data it doesn't work.
What doesn't work?
Do you get errors in the browsers console?
Here is a base ajax example:
http://live.datatables.net/ajax-objects/1/edit
Can you update the example to show the problem you are having?
Kevin
Ok can we do this? Using that base ajax example how would I highlight a row based on a simple condition? Even playing with that base example I don't seem to understand how to make that work.
Thats the point is for you to show us what is not working so we can help.
Here is an example using ajax and rowCallback:
http://live.datatables.net/cotagohi/1/edit
Kevin
If use createdRow: instead of "createdRow" it works (removed the quotations).
Thank you for your assistance.
How do I highlight rows on the next page in the table? That is my next challenge.
createdRowandrowCallbackwill highlight rows when they are displayed. See this example:http://live.datatables.net/cotagohi/2/edit
Go through the pages to see. Please update the test case showing us what you are doing so we can help.
Kevin
Taking your example I would like to do something like this to highlight duplicates but it doesn't extend to all the pages.
$(document).ready(function() {
var names = [];
var dupliacteName = [];
$('#example').dataTable( {
"ajax": "/ajax/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
rowCallback: function (row, data) {```
let name = data.position;
if (names.indexOf(name) > -1) {
dupliacteName.push(name);
}
$(row).attr('data-val', name).css({
"color": "black"
});
names.push(name);
},
initComplete: function (settings, json) {
$.each(dupliacteName, function (index, name) {
$("[data-val='" + name + "']").css({
"color": "red"
});
});
}
} );
} );
I would like to modify the example "http://live.datatables.net/cotagohi/2/edit" with something like below to find and highlight duplicates. This works on the first page but does not extend to the other pages.
$(document).ready(function() {
var names = [];
var dupliacteName = [];
$('#example').dataTable({
"ajax": "/ajax/objects.txt",
"columns": [{
"data": "name"
},
{
"data": "position"
},
{
"data": "office"
},
{
"data": "extn"
},
{
"data": "start_date"
},
{
"data": "salary"
}
],
rowCallback: function(row, data) {
let name = data.position;
if (names.indexOf(name) > -1) {
dupliacteName.push(name);
}
$(row).attr('data-val', name).css({
"color": "black"
});
names.push(name);
},
initComplete: function(settings, json) {
$.each(dupliacteName, function(index, name) {
$("[data-val='" + name + "']").css({
"color": "red"
});
});
}
});
});
You can try updating the test case yourself
I took your code and updated the test case:
http://live.datatables.net/cotagohi/7/edit
One change I made is to use
drawCallbackinstead ofinitComplete.initCompleteruns only once after initialization.drawCallbackwill run each table draw.I'm not sure the code is achieving exactly what you want. Eventually all of the rows will be highlighted.
This might be closer:
http://live.datatables.net/lecafoxa/1/edit
I setup some fake data to have a couple of duplicate names (Ashton Cox and Quinn Flynn). It uses
rows().every()to loop all the rows ininitComplete. It uses the code you created to keep a list of duplicate names. It stores the duplicate rows in theduplicateRowsarray. then loops the array to get therow().node()to set the CSS.http://live.datatables.net/lecafoxa/1/edit
Kevin
I like the last example. That seems to work really well. I appreciated your help.