SharePoint List - Color on cell text menu

Question

I have a SharePoint list where I have code to change color on a cell based on the field. It works but when I change to the second page of the list, the code does not work.

First page :

Second page :

My code, I think it's $(document).ready doesn't work... :

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('Réalisé')");
$Text.css("background-color", "#4DD17E");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Maîtrisé')");
$Text.css("background-color", "#E59B2C");
$Text = $("td.ms-cellstyle.ms-vb2:contains('A risque')");
$Text.css("background-color", "#E52C2C");
$Text.css("color", "white");
});
</script>

Answer 1

You can use JS link option to render Client side. you copy the below script in java script file. upload to a document library. In list view Webpart Propeorties => JS link => you give this JS file reference so that it render the view. you can add multiple fields and switch cases as i shown one status field in the code

function registerRenderer() {

// Create object that have the context information about the field that we want to change it's output render 
var priorityFiledContext = {};
priorityFiledContext.Templates = {};
priorityFiledContext.Templates.Fields = {
    // Apply the new rendering for Priority field on List View
    "Status": { "View": priorityFiledTemplate }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

}

// This function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {

    var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

    // Return html element with appropriate color based on priority value
    switch (status) {
        case "Réalisé":
            return "<span style='backgroundColor:#4DD17E;'>" + status + "</span>";
            break;
        case "Maîtrisé":
            return "<span style='backgroundColor:#E59B2C;'>" + status + "</span>";
            break;
        case "A risque":
            return "<span style='backgroundColor:#E52C2C;'>" + status + "</span>";
break;

    }
}

ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

Answer 2

Updated the code provided by Suresh

function registerRenderer() {

// Create object that have the context information about the field that we  want to change it's output render 
var priorityFiledContext = {};
priorityFiledContext.Templates = {};
priorityFiledContext.Templates.Fields = {
// Apply the new rendering for Priority field on List View
"Statut": { "View": priorityFiledTemplate }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

}
// This function provides the rendering logic for list view

function priorityFiledTemplate(ctx) {

var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
// Return html element with appropriate color based on priority value
switch (status) {
    case "None":
        return '<span style="background-color:#4DD17E;">' + status + '</span>';
        break;
    case "Started":
        return '<span style="background-color:#2DD15A;">' + status + '</span>';
        break;
    case "Completed":
        return '<span style="background-color:#6DD12C;">' + status + '</span>';
        break;

}
}

ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js')

Answer 3

that's was my Solution:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><script>

var tableHeader = null;

window.onload = function () {
    var table = $('.ms-listviewtable')[0];
    tableHeader = $(table).find("thead")[0];

    handleStatusColumn('Status');   
}

function handleStatusColumn(columnTitle){
    colorCellsInSpecificColumn(columnTitle, findCells('O'), '#f08080');     
    colorCellsInSpecificColumn(columnTitle, findCells('IP'), '#d8bfd8');    
    colorCellsInSpecificColumn(columnTitle, findCells('C'), '#c2d633');     
}



function findCells(type){
    return $("td.ms-cellstyle.ms-vb2").filter(function() {
        return $(this).text().trim() === type;
    })
}

function colorCellsInSpecificColumn(column, cellElement, colorHex){
    $.each(cellElement, function( index, value ) {
        var cellIndex = cellElement[index].cellIndex;
        //Return column label base on index of cell
        var columnLabel = returnLabelOfColumn(cellIndex);
        if(columnLabel === column){
            $(cellElement[index]).css("background-color", colorHex);
        }
    });     
}

function returnLabelOfColumn(cellIndex){
    var cellColumnHeader = $(tableHeader).find('th')[cellIndex];
    var headerLabel = $(cellColumnHeader).text().trim();
    return headerLabel 
}




 </script>

****enjoy** ;)!!**