1

I have a Rest API call to pull data to create a Datatable. What I'm trying to figure out is how to dynamically color the rows based on information in one of the columns (example here is if the registration date is over a year). Seems pretty simple, if the registration date is over a year, row = red. But being the noob I am I'm having trouble figuring out where to place the code. Any help would be appreciated! See code below.

function getRegistrations(){
var today = new Date();
var expiration = new Date(new Date().setDate(new Date().getDate() - 365));
var call = $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('activeRegistrations')/items?$select=Title,Company,DeviceSN,RegistrationDate&$top=5000",
    type: "GET",
    dataType: "json",
    headers: { Accept: "application/json;odata=verbose" }
    });

call.done(function (data,textStatus, jqXHR){
    var table = $('#currentRegistrations').DataTable();
    $('#currentRegistrations').on('click','tr',function(){
        var dataDst = $(this).find("td:first-child").text();
    });

    $('#currentRegistrations').DataTable({
        destroy: true,
        iDisplayLength: 5,
        aaData: data.d.results,
        select: true,
        aoColumns: [
            {mData: "Title"},
            {mData: "Company"},
            {mData: "DeviceSN"},
            {mData: "RegistrationDate"}
        ]
    });
});

call.fail(function (jqXHR,textStatus,errorThrown){
    alert("Error retrieving Tasks: " + jqXHR.responseText);
});

}

Doing some searching I've found the below code snippet that should be the right idea, but I haven't figured out where this should be placed in my code :/

$(document).ready(function(){
var table = $('#example').DataTable({
    "createdRow": function( row, data, dataIndex ) {
        if ( data[4] >= "expiration" ){
            $(row).addClass('red');
        }
    }
})

});

Update:

I've played a little more with the coding and have gotten the callback to work, however I'm still stuck on the row actually changing color. See below for updated code:

$('#currentRegistrations').DataTable({
destroy: true,
iDisplayLength: 5,
aaData: data.d.results,
select: true,
aoColumns: [
    {mData: "Title"},
    {mData: "Company"},
    {mData: "DeviceSN"},
    {mData: "RegistrationDate"}
],
rowCallback: function(row, data){
    if (data["Company"] == "company 1"){
        alert ("1");
        $(row).css("color","red");
    }
    else{
        alert ("2");
    }
}

});

This gives me the alerts where they should be, however does not change the row color or the color of the font, I've also tried ("background-color","red") with no luck. It's got to be so close, any help is immensely appreciated

2

1 Answer 1

0

After a lot of playing around, I was finally able to get this to work... I guess thanks for all the help?.. Just wanted to share this in case anyone else ever looked for something similar.

rowCallback: function(row, data){
if (data["RegistrationDate"] <= expiration.toISOString()){
    $('td:eq(6)', row).css('background-color', 'red');
}
else{
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.