CSS color style not working properly while sorting that column?
CSS color style not working properly while sorting that column?
M.Waleed.Hafeez
Posts: 5Questions: 2Answers: 0
Hi there!
I have applied custom CSS to the specific column of my datatable. Everything thing is working fine but now I heard a problem from my client that when he tried to sort that "applying-CSS-column", then the CSS didn't work properly.
I am attaching my screenshot if anyone can help me out.
I'll be very grateful for your support.
Thanks in advance!...
$('#planning-project-datatable').DataTable({
dom: "Blfrtip",
ajax: {
url: '@Url.Action("GetPlanner", "ProjectPlanner")',
type: "POST",
data: { CompanyId: companyId }
},
//responsive: true,
serverSide: true,
processing: true,
scrollX: true,
sScrollY: 400,
pageLength: 50,
// lengthChange: true,
lengthMenu: [
[50, 100, 200, 500],
['50', '100', '200', '500']
],
bSortable: true,
"columnDefs": [
{
"targets": 1,
"createdCell": function (td, cellData, rowData, row, col) {
var endDate = moment(rowData.ProjectEndDate);
var todayDate = moment();
var lateDays = todayDate.diff(endDate, 'days') + 1;
if (lateDays >= greenFrom && lateDays <= greenTo) {
$(td).addClass('green');
} else if (lateDays > amberFrom && lateDays <= amberTo) {
$(td).addClass('yellowish');
} else if (lateDays > redFrom && lateDays <= redTo) {
$(td).addClass('red');
}
}
}
],
columns: [
{ data: "PlanningProjects.Id" },
{ data: "PlanningProjects.ProjectNumber" },
{ data: "CompanyLocations.LocationCode", name: "LocationId" }
This question has an accepted answers - jump to answer
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi @colin
This is a live rough-example of my requirement.
live.datatables.net/cowugasa/2/edit
when you click on the other column for sorting them, then the color of the 1st column will be visible to you. but when you click on the colorful column for sorting then the color will disappear. when you click on other columns for sorting color will appear again.
in my project when I load datatable colors are visible the problem I'm facing is when my client tries to sort that colorful column then the colors will disappear.
Looks like adding
!importantto the CSS helps:http://live.datatables.net/cowugasa/3/edit
Kevin
@kthorngren Thank you so much!. Your answer helps me a lot.