Tablesorter滚动条's的高度在触发更新后保持不变

Tablesorter scroller's height remains same after triggering update

本文关键字:更新 滚动条 高度 Tablesorter      更新时间:2023-09-26

当我使用滚动器小部件并更新表中的数据时,滚动器元素的高度-$(".tablesort-scroller.tablesort-scroller-table").height()-保持不变。我想做的是让滚动条的高度是动态的,这样一个有50行的表将增长到最大高度(由widgetOptions.scroller_height定义),而一个有2行的表则会缩小。这样,行下面就不会有很大的空白。

现在,我只需将生成的内联样式属性height更改为max-height。像这样:

$(table).tablesorter(tableOptions);
//Change the generated "height" inline-style to "max-height"
$("#tableContainer .tablesorter-scroller .tablesorter-scroller-table").css("height",""); //this removes "height" from inline style
$("#tableContainer .tablesorter-scroller .tablesorter-scroller-table").css("max-height",CONFIG.clipTableHeight); //aka, widgetOptions.scroller_height when setting table

有更好或正确的方法吗?我在触发更新后尝试使用以下内容:

// Trigger update
$("#clipsTable").trigger("update");
// Reset everything
$("#clipsTable").trigger("resetToLoadState");
$("#clipsTable").trigger("refreshWidgets",false,true);


谢谢你的帮助,莫蒂。我的最后一个init块看起来是这样的:

$(function(){
  /* Code to calculate value of CONFIG.clipTableHeight */
  /* ... */
  CONFIG.clipTableHeight = 140;
  
  var tableOptions = {
    headers: {
      0: { sorter: false },
      1: { sorter: false },
      2: { sorter: false }
    },
    sortList: [[0,0]],
    textExtraction: {
      0: function(node){
        return $(node).find("input[name='rank']").val();
      }
    },
    widthFixed: true,
    widgets: ['scroller'],
    widgetOptions: {
      scroller_height: CONFIG.clipTableHeight,
      scroller_jumpToHeader: true
    },
    initialized: function(){
      $(".tablesorter-scroller-table").css({
        height: '',
        'max-height': CONFIG.clipTableHeight + 'px'
      });
    }
  };
  
  $("#myTable").tablesorter(tableOptions);
  
});

您需要使用initialized回调来调整可滚动div(演示)的高度

$(function () {
    var $table = $('table'),
        updateScroller = function (height) {
            $('.tablesorter-scroller-table').css({
                height: '',
                'max-height': height + 'px'
            });
        };
    $table.tablesorter({
        theme: 'blue',
        widthFixed: true,
        widgets: ["zebra", "scroller"],
        widgetOptions: {
            scroller_height: 300,
            scroller_upAfterSort: false,
            scroller_jumpToHeader: false
        },
        initialized: function(){
            updateScroller( 300 );
        }
    });
    $('.update').on('click', function () {
        updateScroller( $('input').val() );
    });
});