I can't apply classes to all cells of my table
I can't apply classes to all cells of my table
Hello, my problem is, I create the tbody element of my table with stringbuilder on the .net side and send it to my page. Afterwards, I want to extract data to some cells in the element I sent and change their classes. It successfully applies the data to every row in the table. However, since there is paging in my table (not serverSide, just by design), it only applies to as many rows as the number of pages that are currently open. So, if there are 20 data in my table and we show 10 on 1 page, it brings the data to 20 of them, but it only applies classes to the 10 rows on the 1st page. I am sharing my codes below, please I am looking for help.
function getTbodyHtml() {
dataTableDestroy('dtGeneralFundList')
var tBodyHtmlString = '@Html.Raw(Json.Serialize(ViewBag.TbodyHtmlString))';
var parsedBodyData = JSON.parse(JSON.stringify(tBodyHtmlString));
$('#resultTbody').html(parsedBodyData);
$.when(dataTableRender('dtGeneralFundList')).done(function () {
getChangeForFilter();
});
}
In this function, I add the string coming from the backend to my tbody and render my table.
function getChangeForFilter(){
if (result.fundreturn != null) {
for (var i = 0; i < result.fundreturn.length; i++) {
let code = result.fundreturn[i].code;
let element = $('#percentagereturn_' + code);
let fundPerformance = parseFloat(result.fundreturn[i].fundPerformance);
let content;
if (fundPerformance == notAvailableValue) {
element.addClass("text-white text-center bg-warning");
content = 'N/A';
} else if (fundPerformance == 0) {
element.addClass("text-white text-center bg-dark");
content = 'N/A';
} else if (fundPerformance > 0) {
element.addClass("text-white text-center bg-success");
content = '% ' + convertDigits(fundPerformance);
} else if (fundPerformance < 0) {
element.addClass("text-white text-center bg-danger");
content = '% ' + convertDigits(fundPerformance);
}
element.data('originalContent', content);
table.cell('#percentagereturn_' + code).data(content);
table.cell('#percentagereturn_' + code).nodes().to$().attr('class', element.attr('class')).html(content);
}
}
table.draw();
}
The result comes from an ajax query, I did not write it to avoid confusion.
Answers
What you're doing should work fine. See here, I've added
exampleClass
to the 12th record, "Quinn Fylnn". That record wasn't visible when the class was added, but it still gets applied to the node.Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.
Colin