javascript - 触发更新后，Tablesorter 滚动条的高度保持不变

Question

当我使用滚动器小部件并更新表中的数据时，滚动器元素的高度 - $(".tablesorter-scroller .tablesorter-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);

---

感谢莫蒂的帮助。我的最终初始化 block 如下所示:

$(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);
  
});

Answer 1

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

$(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() );
    });

});