我正在尝试启用datatable
的滚动选项并对其应用slimScroll
以使滚动条看起来更圆滑。到目前为止,我得到了我想做的事情。
很快我意识到,'如果用户重新调整窗口大小怎么办?'。由于datatable和slimScroll的设置都配置了固定值,因此数据表的高度不会根据视口大小进行调整。
我试图在$(window).resize()
事件的帮助下修复此问题,但它无效。我不擅长javaScript编程。我可能做错了什么或必须有其他方法。这是我到目前为止编写的代码。
//Data table
var table = $('#material-content').DataTable({
'paging' : false,
'info' : false,
'order' : [[1, 'desc']],
"scrollY" : $(window).height()*0.46 // want to have 46% of viewport
});
// scrolling
var scroller = $('.dataTables_scrollBody').slimScroll({
"height": $(window).height()*0.46
});
$(window).resize(function () {
var tableSettings = table.fnSettings(); // ERROR says: Uncaught TypeError: undefined is not a function
var scrollerSettings = scroller.fnSettings();
tableSettings.scrollY = $(window).height()*0.46;
scrollerSettings.height = $(window).height()*0.46;
tableSettings.fnDraw();
scrollerSettings.fnDraw();
});