Tablesorter滚动条's的高度在触发更新后保持不变
Tablesorter scroller's height remains same after triggering update
当我使用滚动器小部件并更新表中的数据时,滚动器元素的高度-$(".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() );
});
});
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 可以'无法使滚动条正常工作
- 强制滚动条覆盖页面内容
- 如何隐藏滚动条,但希望它继续工作
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 使用浏览器滚动条而不是iframe滚动条
- 滚动条在关闭引导对话框后消失
- 隐藏元素后更新滚动条
- jQuery自定义滚动条插件没有't使用水平滚动进行更新:true
- Tablesorter滚动条's的高度在触发更新后保持不变
- 滚动条在使用$selector.html()更新内容后重置
- 纳米滚轮自动更新滚动条