Change Color only in the first cell of a table

JochenK

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

JochenK

Hi Colin,

I have a table with fixedColumns ( the first cell ) defined. How i can change the color only for this fixed cell?

Thanks for your help.

rf1234

rowCallback: function (row, data) {
    $('td:eq(0)', row).addClass('bg-danger');
}

using bootstrap class bg-danger. Just apply any CSS you like.
https://datatables.net/reference/option/rowCallback

JochenK

no..it doesn't work ...

my code is:

   <!-- MDB -->
      <script src="scripts/mdb.min.js"></script>
   <script>
  <!-- tables -->
      $(document).ready(function() {
         var table = $('#datenliste').DataTable( {
            scrollY:        "530px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         true,
            ordering:       true,
            info:           false,
            fixedColumns:   true,
            select:         true,
            responsive:     true,
            scroller:       true,
            "language": {
               "lengthMenu": "Zeige _MENU_ Einträge per Seite",
               "zeroRecords": "es sind keine Daten vorhanden",
               "info": "Auflistung Seite _PAGE_ von _PAGES_",
               "infoEmpty": "keine Datensätze vorhanden",
               "infoFiltered": "(gefiltert von _MAX_ Gesamteinträgen)",
               "paginate": {
                  "first": "Erste",
                  "previous": "Zurück",
                  "next": "Nächste",
                  "last": "Letzte"                
               }, 
               "search": "Suche:"  
            },

          rowCallback: function (row, data) {
             $('td:eq(0)', row).addClass('bg-danger');
          }   
        });
        table
           .column( '0:visible' )
           .order( 'desc' )
           .draw();
      });   

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

This example should help - it's conditionally changing the colour but it should get you rolling,

Colin

kthorngren

Is this what you are looking for?
http://live.datatables.net/qovojoni/1/edit

You can use the browser's inspect tool to inspect the first cell to learn the selector used for Datatables cells. The selector might be different with different styling frameworks or configuration options.

Kevin

JochenK

I tried the code snippet, Colins tip, but that didn't work either, the color didn't change. This prompted me to check the css-code closely and I found in my custom-css:
*----------------------------------------------------
thead th,
tr.odd td {
background-color: #E6E6E6 !important;
}

tr.even td {
background-color: #fff !important;
}
*----------------------------------------------------
I think part of a previous cloudtables version. I removed that part and it works!
Thanks to everyone who thought about this problem

Jochen