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