I have a AJAX DataTable in my MVC application in which each row will have an associated icon determining if the row needs special attention:
However, I'd like to remove the column stylings over that column, like this:
Do you know how I could go about doing this, preferably within the AJAX Datatables method?
You can use createdRow option to add class to each row that needs special attention based on row data.
For example:
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex ) {
if(data[2] === 'London'){
$(row).addClass('warning');
}
}
});
Then you can use CSS to style that row as you want.
What you're asking can be achieved by using the following styles:
.dataTables_wrapper {
padding-right: 30px;
}
tr.warning td:last-child {
position: relative;
}
tr.warning td:last-child:after {
position: absolute;
right: -30px;
content: '(!)';
color: red;
}
See this example for code and demonstration.
However I would recommend to use background color to highlight rows, I think it is less intrusive and doesn't require space for ! icon. See this example for code and demonstration.
