javascript - example - Plug-in DataTables-¿Mostrar la barra de desplazamiento debajo de la etiqueta tfoot?

jquery datatable ajax

Question

Utilizo el complemento jQuery DataTables y "scrollX":true para el desplazamiento horizontal.

¿Por qué aparece la barra de desplazamiento sobre la etiqueta tfoot ? ¿Cómo hacer que aparezca debajo del pie de página?

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

Vea el ejemplo de JSFiddle que demuestra el problema.

Answer 1

Debe agregar el siguiente código a las opciones de inicialización de 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());
    });                    
},

Ver JSFiddle actualizado para demostración.

Answer 2

La solución dada por Gyrocode.com es buena. Pero falla cuando se prueba en varios dispositivos y navegadores. Así que aquí hay una versión mejorada que funciona tanto en dispositivos táctiles como en navegadores específicos del sistema operativo.

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

}

También para eliminar el desplazamiento delgado en Mac OS y varios otros dispositivos móviles, agregue

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