Replies

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  May 2020

  Use createdRow for this. There is an example in the docs and a running example.

  Kevin
• michael@hockstein.org Posts: 7Questions: 0Answers: 0

  May 2020 edited May 2020

  OK. I started with something simple as a test. This is buried in the body starting with $('#example').DataTable({...

  "createdRow": function (row, data, index) {
    $(row).css("background-color", "red");
  }
  

  This was supposed to change every column of every row red. However, it changes every column red on every row except the first column!

  Once I figure this out I can use the data for some logic. It's probably a jQuery mistake. Any suggestions?
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  May 2020

  See if this thread helps.

  Kevin
• michael@hockstein.org Posts: 7Questions: 0Answers: 0

  May 2020

  No doubt I'm moving forward. But still failing.

  I added the following styles:

  table#example.dataTable tbody tr.Highlight > .sorting_1 {
  background-color: rgb(245, 10, 10);
  }

  table#example.dataTable tbody tr.Highlight {
  background-color: rgb(245, 10, 10);
  }

  Unfortunately, even with the .addClass commented out (see below), the rows are now always red. Sort of odd as the style should only be invoked if there element has the Highlight class (which I never assigned). Interesting, if you change the style name from Highlight to myStyle, the color is not assigned suggesting that deep in the DataTable code the class Highlight is being assigned. Unfortunately, even with a name reassignment to the style, the addClass doesn't change the color.

  "createdRow": function (row, data, dataIndex, cells) {
   // $(row).addClass("Highlight");
  }
  
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  May 2020 edited May 2020

  Unfortunately, even with a name reassignment to the style, the addClass doesn't change the color.

  Could be that you are using a styling framework and the CSS selectors might be something different. You can use Inspect to see what is being used. Or you can update the example or create your own or post a link to your page so we can take a look to help with suggestions.

  Kevin
• michael@hockstein.org Posts: 7Questions: 0Answers: 0

  May 2020

  The class of the table:

  <

  table id='example' class='design' style='width: 50%;'>

  If you remove class='design' then the classes I created and the addClass function work. Unfortunately you lose the rest of the basic style like every other row highlighting and row dividers
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  May 2020

  I haven't seen the class design before with Datatables. Where does it come from? Is it for a styling framework?

  Kevin
• michael@hockstein.org Posts: 7Questions: 0Answers: 0

  May 2020

  Sorry, display. Typing fast
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  May 2020

  There must be something else as the example in the other thread has display. Without a link to your page or a test case showing the issue it will be hard to offer suggestions.

  Did you use the browser's Inspect (right click on the row > Inspect) to see what is being applied and/or overridden?

  Kevin
• michael@hockstein.org Posts: 7Questions: 0Answers: 0

  May 2020

  I did. You can see the styles applied all the way down to tr.odd and tr.even at the very inside of the table.

  No worries. One day I'll figure it out. Thanks for all your help.
• michael@hockstein.org Posts: 7Questions: 0Answers: 0

  June 2020

  A new day and a new way.

  Honestly, I can't tell what's different but it works like it the example. Thanks for your help
• Alexandr45 Posts: 30Questions: 1Answers: 3

  June 2020

  I did it using rowCallback. When adding the class, I specified background-color: #6BFFB5 !important; and everything works.

  rowCallback: function ( row, data, cell ) {
  // Set the checked state of the checkbox in the table
  $('input.editor-set_h', row).prop( 'checked', data.kontragent.set_h == 1 );
  if(data.kontragent.set_h == 1){
  $(row).addClass('non');
  } else {
  $(row).removeClass('non');
  }
  $('input.editor-block', row).prop( 'checked', data.kontragent.block == 1 );
  if(data.kontragent.block == 1){
  $(row).addClass('block');
  } else {
  $(row).removeClass('block');
  }
  }
• rf1234 Posts: 2,991Questions: 87Answers: 421

  June 2020

  I am also using rowCallback for these purposes - and it always works. Just adapted the example to use it: http://live.datatables.net/jowoxuhu/1/edit

  https://datatables.net/reference/option/rowCallback

  And another, more complex example from my own coding to highlight how to use "data" and "row"

  rowCallback: function (row, data) {
      if ( data.cashflow.manual > 0 || data.cashflow.additional_repayment > 0 ) {
          $(row).addClass('fontThick');
      }
      //if it is not the summation row the row should be selectable
      if ( data.cashflow.position !== 'L' ) {
          $(row).addClass('selectRow');
      }
       //for inline editing of the repayment amount we don't want to allow this
      //in the first and in the last row and not in records that are only accrual records = is_pseudo_cf
      if ( data.cashflow.position    !== 'L' && data.cashflow.position !== 'A'
                                             && data.cashflow.is_pseudo_cf < 1  ) {
          if ( data.cashflow.additional_repayment < 1 && instrument !== 'Y' ) {
              $(row).addClass('inlineRepaymentInterest');
          }
      }
      if (data.implausibleRepayment > 0) {
         implausibleRepayment = true;
      }
  }