如何在启用滚动时动态更改数据表相对于视口的高度?

时间:2015-04-14 08:01:51

标签: javascript jquery jquery-datatables slimscroll

我正在尝试启用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();
   }); 

0 个答案:

没有答案