Плагин DataTables - отображать полосу прокрутки ниже тега tfoot?

Question

Я использую плагин jQuery DataTables и "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

Вам нужно добавить следующий код вы DataTables параметры инициализации:

"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; 
}