How do I do a simple rowCallback to highlight a row when using an ajax call

vansin

    $(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'
                }
            ]
        });
    })

kthorngren

Take a look at this example. The functionality of createdRow and rowCallback are the same. The difference is createdRow runs once where rowCallback runs each time the row is rendered. Use createdRow if the data doesn't change or if it can change then use rowCallback.

Kevin

vansin

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.

kthorngren

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

vansin

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.

kthorngren

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

vansin

If use createdRow: instead of "createdRow" it works (removed the quotations).

vansin

Thank you for your assistance.

vansin

How do I highlight rows on the next page in the table? That is my next challenge.

kthorngren

createdRow and rowCallback will 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

vansin

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"
});
});
}

} );
} );

vansin

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"
});
});
}
});
});

kthorngren

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 drawCallback instead of initComplete. initComplete runs only once after initialization. drawCallback will 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 in initComplete. It uses the code you created to keep a list of duplicate names. It stores the duplicate rows in the duplicateRows array. then loops the array to get the row().node() to set the CSS.
http://live.datatables.net/lecafoxa/1/edit

Kevin

vansin

I like the last example. That seems to work really well. I appreciated your help.