触发更新后Tablesorter scroller的高度保持不变

Question

当我使用scroller部件并更新表中的数据时，scroller元素的高度--$(“..tablesorter scroller..tablesorter scroller table”)--.height()保持不变。我要做的是让滚动体的高度是动态的，这样一个50行的表将增长到一个最大的高度(由widgetOptions.scroller_height定义)，而一个有2行的表将缩小。这样，行下就没有巨大的空白处了。

现在，我只是将生成的内联样式属性高度更改为最大高度。就像这样：

​

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

​

Answer 1

您需要使用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() );
    });

});