Attempted to call Javascript when filtering a SharePoint List View web part

Question

I have javascript that will be a colored bar in a SharePoint list. Browse the web part based on the values ​​in a specific column. This part works fine, and the lines are colored correctly when the page loads. The problem is that when the list is filtered (if you click on any of the column headings and sort in ascending or descending order), the formatting will be lost and the colors will disappear.

I am looking for a formatting method to stay or reapply after the filter action has completed. If the page is refreshed, the selected filter will remain in place and the colors will return.

I need the colors to be reapplied after applying the filter instead of just loading the page.

Thanks in advance.

Here is my current JS:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {            
        var trimmed = rows[i]["Age"]
        var final = trimmed.replace(",", "");
        var oneWeek = final < 7;
        var oneToTwo = final >= 7 && final <= 14;
        var twoOrMore = final > 14;

        if (oneWeek)
            {
                var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                var tr = document.getElementById(rowElementId);
                tr.style.backgroundColor = "#CCFFCC";

            }

        else if (oneToTwo)
            {
                var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                var tr = document.getElementById(rowElementId);
                tr.style.backgroundColor = "#FFEECC";

            }

        else if (twoOrMore)
            {
                var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                var tr = document.getElementById(rowElementId);
                tr.style.backgroundColor = "#FFCCCC";

            }
        }       

    }
}

);

Answer 1

So, after a ton of investigation, it turned out that my formatting was overwritten at the last second after the sorting or filter occurred.

The solution was to add this to the end of the code: ctx.skipNextAnimation = true; This skipped the animation, which displays all the lines falling into place, and allows my formatting to take effect, as it should be.

Answer 2

I would recommend checking jquery.tablesorter.js out, this will contain your styles. The order is on the client side in your case, so you must solve it there. You can apply it for simple tables and add short js:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);