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