DataTables插件-在tfoot标签下显示滚动条？
DataTables插件-在tfoot标签下显示滚动条？
提问于 2015-06-15 19:17:55
我使用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演示问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-15 20:40:30
您需要将以下代码添加到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。
Stack Overflow用户
发布于 2019-03-19 04:08:11
我更喜欢雅弗斯·阿德万的答案，但它在Windows上不起作用，所以我修改了禁用tbody滚动条的代码。
// Disable TBODY scroll bars
if (!device.isMac && !device.isAndroid) {
// for Windows
scrollBody.css({'-ms-overflow-style': 'none'})
} else {
scrollBody.css({ 'overflow-x': 'hidden' });
}在Windows上使用键盘箭头滚动仍然非常慢，大概是因为DataTables的tbody scroll listener触发了tfoot scroll listener，而tbody又触发了tbody等等(参见How to Synchronize Scroll Between two windows)当我禁用了DT侦听器并将其替换为我自己的时，这个问题就解决了。
$(scrollBody).off('scroll.DT');
var ignore = false;
// Sync TFOOT scrolling with TBODY
function syncScroll(elA, elB) {
function scrollLeft(el, position) {
ignore = true;
el.scrollLeft(position);
}
$(elA).scroll(function() {
var tmpIgnore = ignore;
ignore = false;
if (!tmpIgnore) {
var scrollPos = $(elA).scrollLeft();
$(scrollHead).scrollLeft(scrollPos);
scrollLeft($(elB), scrollPos);
}
});
}
syncScroll(scrollBody, scrollFoot);
syncScroll(scrollFoot, scrollBody);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30843811
复制相关文章
相似问题