Answers

• kthorngren Posts: 21,529Questions: 26Answers: 4,987

  April 2020 edited April 2020

  I would consider using columns.render. Here is an example:
  http://live.datatables.net/kizisema/1/edit

  rows().invalidate() is used to invalidate all the data so that Datatables runs the columns.render function when using draw(). Otherwise, for efficiency, the render function won't run since there are no changes. Also the draw() uses the parameter false which stays on the same page. Using this method allows for searching and sorting by the calculated value.

  Kevin
• AnubisJP Posts: 15Questions: 5Answers: 0

  April 2020

  Hey Kevin - thanks for the informative response!

  I've been trying it out but cannot seem to apply it into my code. My table is loading as expected and my "createdRow" feature is working correctly, but sadly not the columnDefs/divide feature.

  One noticeable difference is you defined your data within the code whereas mine is parsed from a db into html then referenced via the class. Should this make a difference?

  Any help appreciated and thanks for your time so far! code below.

  HTML snippet of the checkbox

    <div class="container" style="margin-top: 20px">
      <input type="checkbox" id="divide"/>Divide by 2
  

  JavaScript

  $(document).ready(function() {
          var fpl_player_scores_table = $('.fpl_player_scores_class').DataTable( {
  
              // starting order of table ordered on Total
              "order": [[ 8, "desc" ]],
  
              // test division
              "columnDefs": [
                  {
                      targets: 4,
                      render: function (data, type, row) {
                        if ( $('#divide').prop('checked') ) {
                          return data / 2;
                        }
                      return data;
                      }
                  }
              ],
  
              // td colour changes
              "createdRow": function( row, data, dataIndex ) {
                  if ( data[3]/9 >= 6 ) {        
                      $(row).find('td:eq(3)').addClass('td_green');
                  } else if ( data[3]/9 >= 5 ) {
                      $(row).find('td:eq(3)').addClass('td_lgreen');
                  } else if ( data[3]/9 >= 4 ) {
                      $(row).find('td:eq(3)').addClass('td_yellow');
                  } else if ( data[3]/9 >= 3 ) {
                      $(row).find('td:eq(3)').addClass('td_orange');
                  } else {
                      $(row).find('td:eq(3)').addClass('td_red');
                  }
              }
          });
  
       $('#divide').on('change', function () {
          fpl_player_scores_table.rows().invalidate();
          fpl_player_scores_table.draw(false);
          });
      } );
  
• kthorngren Posts: 21,529Questions: 26Answers: 4,987

  April 2020 Answer ✓

  Looks like you need to pass the data parameter for rows().invalidate(). Like this:
  http://live.datatables.net/kizisema/3/edit

  Kevin
• AnubisJP Posts: 15Questions: 5Answers: 0

  April 2020

  That did the trick! Thanks so much, Kevin. Great info.