DataTables插件 - 在tfoot标签下面显示滚动条？

Question

使用jQuery数据表插件和"scrollX":true水平滚动。

为什么出现滚动条上方tfoot标签？如何使其出现在页脚下？

var table = $('#example') 
    .DataTable(
    { 
     "scrollX": true, 
     "scrollCollapse": true, 
     "dom": 'Zlrtip', 
     "colResize": { 
      "tableWidthFixed": false, 
      //"handleWidth": 10, 
      "resizeCallback": function(column) 
      { 

      } 
     }, 
     "searching": false, 
     "paging": false, 
     "info":  false, 
     "deferRender": true, 
     "sScrollX": "190%" 
    }); 

查看JSFiddle example显示问题。

Answer 1

您需要将以下代码添加到您的数据表初始化选项：

"fnInitComplete": function(){ 
    // Disable TBODY scoll bars 
    $('.dataTables_scrollBody').css({ 
     'overflow': 'hidden', 
     'border': '0' 
    }); 

    // Enable TFOOT scoll bars 
    $('.dataTables_scrollFoot').css('overflow', 'auto'); 

    // Sync TFOOT scrolling with TBODY 
    $('.dataTables_scrollFoot').on('scroll', function() { 
     $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft()); 
    });      
}, 

示范见updated JSFiddle。

Answer 2

通过Gyrocode.com给出的解决方案是好的。但在各种设备和浏览器上进行测试时会失败。所以这里是一个增强版本，可以在触控设备以及操作系统特定的浏览器上使用。

fnInitComplete: function() { 
    var device = getBrowserInfo(), 
     horizontalScroll = 0, 
     tableElement = $(this[0]), 
     scrollBody = $('.dataTables_scrollBody'), 
     scrollFoot = $('.dataTables_scrollFoot'), 
     maxScrollLeft, 
     start = { x:0 , y:0 }, 
     offset; 

    // Compute the maxScrollLeft value 
    tableElement.on('draw.dt', function() { 
     maxScrollLeft = tableElement.width() - scrollBody.width() + 2; 
    }); 

    // Disable TBODY scoll bars 
    scrollBody.css({ 'overflow-x': 'hidden' }); 

    // Enable TFOOT scoll bars 
    scrollFoot.css('overflow-x', 'auto'); 

    // Sync TFOOT scrolling with TBODY 
    scrollFoot.on('scroll', function(event) { 
     horizontalScroll = scrollFoot.scrollLeft(); 
     scrollBody.scrollLeft(horizontalScroll); 
    }); 

    // Enable body scroll for touch devices 
    if((device.isAndroid && !device.isChrome) || device.isiPad 
     || (device.isMac && !device.isFF)) { 
     // Enable for TBODY scoll bars 
     scrollBody.css({ 'overflow-x': 'auto'}); 
    } 

    // Fix for android chrome column misalignment on scrolling 
    if(device.isAndroid && device.isChrome) { 
     scrollBody[0].addEventListener("touchstart", touchStart, false); 
     scrollBody[0].addEventListener("touchmove", touchMove, false); 
     scrollFoot[0].addEventListener("touchstart", touchStart, false); 
     scrollFoot[0].addEventListener("touchmove", touchMoveFooter, false);      
    } 

    // Fix for Mac OS dual scrollbar problem 
    if(device.isMac && device.isFF) { 
     scrollBody.on('wheel', function(event) { 
      if(Math.abs(event.originalEvent.deltaY) < 3) { 
       event.preventDefault(); 
      } 
      performScroll(event.originalEvent.deltaX); 
     }); 
    } 

    /* 
    * Performs the scroll based on the delta value supplied. 
    * @param deltaX {Number} 
    */ 
    function performScroll(deltaX) { 
     horizontalScroll = horizontalScroll + deltaX; 
     if(horizontalScroll > maxScrollLeft) { 
      horizontalScroll = maxScrollLeft; 
     } else if(horizontalScroll < 0) { 
      horizontalScroll = 0; 
     } 
     scrollFoot.scrollLeft(horizontalScroll); 
    } 

    /* 
    * Computes the touch start position along with the maximum 
    * scroll left position 
    * @param e {object} 
    */ 
    function touchStart(e) { 
     start.x = e.touches[0].pageX; 
     start.y = e.touches[0].pageY; 
    } 

    /* 
    * Computes the offset position and perform the scroll based 
    * on the offset 
    * @param e {Object} 
    */ 
    function touchMove(e) { 
     offset = {}; 
     offset.x = start.x - e.touches[0].pageX; 
     offset.y = start.y - e.touches[0].pageY; 
     performScroll(offset.x/3); 
    } 

    /* 
    * Computes the offset position and perform the scroll based 
    * on the offset 
    * @param e {Object} 
    */ 
    function touchMoveFooter(e) { 
     e.preventDefault(); 
     touchMove(e); 
    } 

    /** 
    * @getBrowserInfo 
    * @description 
    * To get browser information 
    * 
    * @return {Object} 
    */ 
    function getBrowserInfo() { 
     return { 
      isiPad: (/\(iPad.*os (\d+)[._](\d+)/i).test(navigator.userAgent) === true || navigator.platform.toLowerCase() === 'ipad', 
      isAndroid: (/\(*Android (\d+)[._](\d+)/i).test(navigator.userAgent), 
      isMac: navigator.platform.toUpperCase().indexOf('MAC') >= 0, 
      isChrome: !!window.chrome, 
      isFF: !!window.sidebar 
     }; 
    }; 

} 

还能够去除苗条滚动在Mac OS和其他各种移动设备添加

.dataTables_scrollBody::-webkit-scrollbar { 
    display: none; 
}