Question

我正在尝试使用带有fixedheader（v3）的Datatables以及启用水平滚动。附件是小提琴http://jsfiddle.net/xF8hZ/344/

$(document).ready(function() {
    var table = $('#example').DataTable({        
       searching: false,
        paging: false,
        ordering: false,
        info: false,
        fixedHeader: true,
        scrollX: true
    });

} );

滚动固定页眉宽度时，不与表格的其余部分对齐。你可以帮我解决这个问题吗？

由于

Answer 1

使用CSS粘性的纯CSS解决方案（不适用于ie 11）：删除fixHeader插件添加此CSS

.dataTables_scrollHead {
  position: sticky !important;
  top: 119px;
  z-index: 99;
  background-color: white;
  box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);
}

Answer 2

我已经阅读了两天，因此，将他们全部聚集在一起，这是我的贡献。

我弄清楚了，希望这对某人有用或对开发有帮助。

由于巨大的表格，我的数据表位于DIV中，并且水平滚动启用。设置固定标头后，将其设置为FIXED，并将新表插入到BODY而不是div内。

我将其附加到DIV而不是BODY上，以便可以继承溢出规则。

文件： dataTables.fixedHeader.min.js（搜索“ appendTo”）发件人：

e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo("body")

收件人：

e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo(".dataTables_scroll")

现在，它被附加到datatables-created-div上，与dataTables_scrollHead，dataTables_scrollBody处于同一级别，而不是单独搁在主体上，无论溢出还是显示/突出。

文件： fixedHeader.bootstrap.min.css 发件人：

table.dataTable.fixedHeader-floating{position:fixed !important}

收件人

table.dataTable.fixedHeader-floating{position:absolute !important}

或文件： fixedHeader.dataTables.min.css 发件人：

table.fixedHeader-floating{position:fixed !important;background-color:white;}

收件人

table.fixedHeader-floating{position:absolute !important;background-color:white;}

注意CSS和JS文件的CACHE。

现在，浮动的粘性行已经出现，但不正确，实际上溢出了。运行此JS，检测何时显示fixedHeader-floating，并不断调整它们以跟随水平滚动并坚持到顶部。

setInterval(function(){
  if($('.fixedHeader-floating').is(':visible')){
     var myoffset = Math.round($(window).scrollTop() - $('#Detail2Container').position().top + $('.topbar').height() - 145);
     var positionleft = $('.dataTables_scrollHeadInner').position();
     $('.fixedHeader-floating').css({ 'top': myoffset, 'left': positionleft.left + 10 });
  }
}, 50); //every 50ms

Detail2Container是包装数据表的DIV。我不能将dataTables_wrapper用作参考，因为同一页面中有几个。在我的页面中，我只有一个需要fixedHeader的表，如果我需要2，这将很困难。但是我会在需要时处理它。

您可以根据自己的设计调整计算。

2天让我弄清楚。所以我也想分享它。

Answer 3

我通过这样做找到了我的项目的解决方案：

$('#example').scroll(function() {
    if ( $(".fixedHeader-floating").is(":visible") ) {
        $(".fixedHeader-floating").scrollLeft( $(this).scrollLeft() );
    }
});

当你向下滚动时，DataTables会创建一个新表作为fixedHeader，我在这里做的是检测用户何时在$('#example')表上水平滚动，然后在fixedHeader上使用scrollLeft()匹配滚动位置。

我还将此添加到我的.css中，因此用户将无法在fixedHeader表上滚动：

.fixedHeader-floating {
    overflow: hidden;
}

Answer 4

这解决了问题。

let tableParams = {
    autoWidth: false,
    // etc...
    scrollX: true,
    fixedHeader: true,
    initComplete: function(settings, json) {
        // To fix the issue of when scrolling on the X axis, the header needs also to scroll as well.
        this.find('.dataTables_scrollBody').on('scroll', function() {
            this.find('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft());
        });
    },
};

也可以隐藏垂直滚动条。

me.containerElement.find('.dataTables_scrollBody').css({'overflow-y': 'hidden'});

其中containerElement是datatable元素的父元素。

Answer 5

关注对我有用

  $('.dataTables_scrollBody').on('scroll', function () {
       $('.dataTables_scrollHead', $(this).parent()).scrollLeft($(this).scrollLeft());
  });

Answer 6

基于this，我能够使其正常运行（问题：当FixedHeader浮动时，排序将不起作用 ==> 请参见下面的更新1修复）

说明：

FixedHeader（.dataTables_scrollHeadInner）是数据表（.dataTables_scrollBody）之外的另一张表
垂直滚动时，它将检查滚动顶部并相应地将FixedHeader设置为顶部。
水平滚动时，它将与正文（$('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft())）一起滚动FixedHeader

JS

// sorry - had to use global variable
// global variable for scroll-body y position
var yPositionOfScrollBody;

function adjustDatatableInnerBodyPadding(){
    let $dtScrollHeadInner = $('.dataTables_scrollHeadInner');
    let outerHeightOfInnerHeader = $dtScrollHeadInner.outerHeight(true);
    //console.log('outerHeightOfInnerHeader => ' + outerHeightOfInnerHeader);
    $('.dataTables_scrollBody').css('padding-top', outerHeightOfInnerHeader); 
}

function setFixedHeaderTop(header_pos){
    //console.log("header_pos : " + header_pos);
    $('.dataTables_scrollHeadInner').css({"top": header_pos});
}

function fixDatatableHeaderTopPosition(){
    //console.log("fixHeaderTop...");

    yPositionOfScrollBody = window.scrollY + document.querySelector('.dataTables_scrollBody').getBoundingClientRect().top;
    //console.log("yPositionOfScrollBody: " + yPositionOfScrollBody);

    setFixedHeaderTop(yPositionOfScrollBody);
}

function onDataTableInitComplete(settings, json) {

    // for vertical scolling
    yPositionOfScrollBody =  window.scrollY + document.querySelector('.dataTables_scrollBody').getBoundingClientRect().top;

    // datatable padding adjustment
    adjustDatatableInnerBodyPadding();

    // data table fixed header F5 (refresh/reload) fix
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    //console.log("scrollTop => " + scrollTop);
    if(scrollTop > 1){
        let header_pos;
        if (scrollTop < yPositionOfScrollBody){
           header_pos = yPositionOfScrollBody - scrollTop;
        } else {
           header_pos = 0;
        }
        setFixedHeaderTop(header_pos);
    }

    let $dtScrollHeadInner = $('.dataTables_scrollHeadInner');
    // horizontal scrolling
    $('.dataTables_scrollBody').on('scroll', function () {

        let $dtScrollBody = $(this);

        // synchronize
        let amountOfLeftScroll = $dtScrollBody.scrollLeft();
        $dtScrollHeadInner.scrollLeft(amountOfLeftScroll);

        let scrollDiff =  $dtScrollHeadInner.scrollLeft() - amountOfLeftScroll;

        //console.log("scrollDiff: " + scrollDiff);

        if(scrollDiff < 0){
            $dtScrollHeadInner.css('left', scrollDiff);
        }else{
            //console.log("scroll back to left side");
            $dtScrollHeadInner.css('left', '');
        }

    });

    //console.log("adjusment mergin: " + yPositionScrollHeadInner);
    $(document).on('scroll', function () {
        let scroll_pos = $(this).scrollTop();
        if(scroll_pos <= 0){
            fixDatatableHeaderTopPosition();
        }else{
            let margin = yPositionOfScrollBody; // Adjust it to your needs
            let cur_pos = $('.dataTables_scrollHeadInner').position();
            let header_pos = cur_pos.top;
            if (scroll_pos < margin){
               header_pos = margin - scroll_pos;
            } else {
               header_pos = 0;
            }
            setFixedHeaderTop(header_pos);
        }
    });
}


$(function(){

    $("#tableId").DataTable({
        scrollX: true,
        fixedHeader: true,
        initComplete: onDataTableInitComplete,
        // ... : ...
    });
});

CSS

/* data table - scroll and fixed header */
table.dataTable.fixedHeader-floating {
    display: none !important;  /*Hide the fixedHeader since we dont need it*/
}

.dataTables_scrollHeadInner{
    margin-left: 0px;
    width: 100% !important;
    position: fixed;
    display: block;
    overflow: hidden;
    /*margin-right: 30px;*/
    background: white;
    z-index: 1;
}

.dataTables_scrollBody{
    padding-top: 2.5em;
}

div.dataTables_scrollHead table.dataTable {
    padding-right: 0;
}

更新1-排序问题修复

使用fixedHeader: false

$(function(){

    $("#tableId").DataTable({
        scrollX: true,
        fixedHeader: false,
        initComplete: onDataTableInitComplete,
        // ... : ...
    });
});

Answer 7

您可以更改“ left”，但先保存初始值：

  Compiling playground v0.0.1 (/playground)
error[E0432]: unresolved import `std::boxed::FnBox`
 --> src/main.rs:4:5
  |
4 | use std::boxed::FnBox;
  |     ^^^^^^^^^^^^^^^^^ no `FnBox` in `boxed`

error: aborting due to previous error

For more information about this error, try `rustc --explain E0432`.
error: Could not compile `playground`.

To learn more, run the command again with --verbose.

数据表 - 使用scrollX

7 个答案:

JS

CSS

更新1-排序问题修复