CODEWITHSUNDEEP
jqueryajaxdatatables
Delfino
Delfino

Reputation: 1009

jQuery Datatables - Hide Column Styling

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:

enter image description here

However, I'd like to remove the column stylings over that column, like this:

enter image description here

Do you know how I could go about doing this, preferably within the AJAX Datatables method?

Upvotes: 1

Views: 89

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58890

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.

Upvotes: 1

Related Questions