Question

当我使用滚动小部件并更新表格中的数据时，滚动条元素的高度 - $（＆＃34; .tablesorter-scroller .tablesorter-scroller-table＆＃34;）。height（） - 保持原样。我想要做的是让滚动条的高度保持动态，这样一个包含50行的表格将增长到最大 height （由widgetOptions.scroller_height定义），并且有2行的表将缩小。这样，行下方就没有巨大的空白区域。

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

＆＃13;

$(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

＆＃13;

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

＆＃13;

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

＆＃13;

感谢Mottie的帮助。我的最终init块看起来像这样：

＆＃13;

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

＆＃13;

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

});

触发更新后，Tablesorter卷轴的高度保持不变

1 个答案: