Tablesorter scroller's height remains same after triggering update

Question

When I use the scroller widget and I update the data in the table, the scroller element's height - $(".tablesorter-scroller .tablesorter-scroller-table").height() - remains the same. What I'm trying to do is having the scroller's height be dynamic, so that a table with 50 rows will grow to a maximum of height (defined by widgetOptions.scroller_height), and a table with 2 rows will shrink down. That way, there isn't a huge blank space below the rows.

Right now, I'm doing it by just changing the generated inline style property height to max-height. Like so:

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

Is there a better or correct way to do it? I tried using the following after triggering an update:

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

---

Thanks for the help Mottie. My final init block looks like this:

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

You'll need to use the initialized callback to adjust the height of the scrollable 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() );
    });

});