DataTables.net custom font-size after sorting

2019-09-04 15:27发布

问题:

I'm using DataTables.net to insert a Table in my website. I also added a function to add/remove columns in this table. In order to fit the container size, I change the font-size in the table in respect to the column number.

My problem: If I use the sorting function (arrows next to the header), those changes in font-size are not considered.

For example:
I have my table and add a 5. column. After this, the font-size changes to 0.8em. The I push the sorting arrow in order to sort my results. The table reloads with the original font-size 1.0em.

Is there a possibility to intercept the sorting function to insert my method to change the font-size? Or does anybody has another idea to solve that problem?

EDIT: I have the same problem when i change the page in order to show more results in the table.

EDIT: Here is the code I use to change the font-size(it works on the actual table view, but not if I change the table by sorting or changing pages). I call that method whenever a column has been added/removed.

 if(counter < model.getMaxCol()){
    $('#room-table tr').css('font-size', "1.0em");
 }
 else if(counter = model.getMaxCol()){  
    $('#room-table tr').css('font-size', "0.75em");
 }

回答1:

Maybe try adding a custom class to the row rather than just changing the font so that the sorting classes that are added are overridden as well? e.g.

if(counter = model.getMaxCol()){  
    $('#room-table tr').addClass('customFont');
 }

CSS:

.customFont {
  font-size: 0.75em;
}

Edit: using the fnRowCallback as suggested by markpsmith

var table = $('#example').DataTable({

  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

  if ( true ) // your logic here
  {
    $(nRow).addClass( 'customFont' );
  }
}

});