DataTables.net自定义字体大小排序后 [英] DataTables.net custom font-size after sorting

问题描述

我使用 DataTables.net 在我的网站中插入表格。我还添加了一个函数来添加/删除此表中的列。为了适应容器大小，我根据列号更改表中的字体大小。

我的问题：如果我使用排序函数（标题旁边的箭头），不考虑字体大小的更改。

例如：
我有我的表，并添加一个5.列。之后，font-size更改为0.8em。我推排序箭头为了排序我的结果。表格以原始字体大小1.0em重新加载。

是否有可能拦截排序函数以插入我的方法来更改字体大小？

编辑：当我更改页面时，我有同样的问题，为了显示更多

编辑：这里是我用来更改字体大小的代码（它在实际的表视图上工作，但如果我通过排序或更改页面更改表）。

  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）; 
} 
  

解决方案

到行而不是只是更改字体，以便添加的排序类也被覆盖？例如

  if（counter = model.getMaxCol（））{
 $（'＃room-table tr'） .addClass（'customFont'）; 
} 
  

CSS：

  .customFont {
 font-size：0.75em; 
} 
  

编辑：使用markpsmith建议的fnRowCallback

  var table = $（'＃example'）。DataTable（{
 
fnRowCallback：function（nRow，aData，iDisplayIndex ，iDisplayIndexFull）{
 
 if（true）//这里的逻辑
 {
 $（nRow）.addClass（'customFont'）; 
} 
} 
 
}）; 
  

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");
 }

解决方案

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' );
  }
}

});

这篇关于DataTables.net自定义字体大小排序后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！