【问题标题】:Datatables - fixedHeader with scrollX数据表 - 带有scrollX的fixedHeader
【发布时间】:2015-08-26 01:45:03
【问题描述】:

我正在尝试使用带有固定标题 (v3) 的数据表以及启用水平滚动。附上小提琴http://jsfiddle.net/xF8hZ/344/

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

} );

.

滚动时,固定标题的宽度与表格的其余部分不对齐。你能帮我解决这个问题吗?

谢谢

【问题讨论】:

标签: datatables


【解决方案1】:

使用 css sticky 的纯 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);
}

【讨论】:

  • 非常简单易用的数据表粘性标题解决方案。谢谢!
  • 如何使这项工作我不明白?这是哪个班?
【解决方案2】:

我已经阅读了 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 文件的缓存。

现在浮动的粘性行已经出现,但不合适并溢出。 让这个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 天时间来解决这个问题。所以我也想分享一下。

【讨论】:

  • 谢谢,您的解决方案对我有用。你救了我的命:)
【解决方案3】:

以下对我有用

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

【讨论】:

    【解决方案4】:

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

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

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

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

    .fixedHeader-floating {
        overflow: hidden;
    }
    

    【讨论】:

    • 不为我工作你能分享一下工作朋克的例子吗
    【解决方案5】:

    这解决了问题。

    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 是数据表元素的父元素。

    【讨论】:

      【解决方案6】:

      基于this,我能够让它工作(问题:当 FixedHeader 浮动时,排序不起作用 ==> 请参阅下面的更新 1 来修复它强>)

      说明:

      1. FixedHeader (.dataTables_scrollHeadInner) 是数据表 (.dataTables_scrollBody) 之外的另一个表
      2. 垂直滚动时,它会检查scrolltop并相应地设置FixedHeader top。
      3. 水平滚动时,会滚动FixedHeader with body ($('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft()))

      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,
              // ... : ...
          });
      });
      

      【讨论】:

        【解决方案7】:

        你可以改变'left'但先保存初始值:

        var initLeft = 0;
        
        $(".dataTables_scrollBody").scroll(function () {
            if ($(".fixedHeader-floating").is(":visible")) {
                if (initLeft == 0)
                    initLeft = $(".fixedHeader-floating").position().left;
        
                $(".fixedHeader-floating").css("left", $(this).scrollLeft() * (-1) + initLeft);
            }
        });
        

        【讨论】:

          猜你喜欢
          • 2022-10-05
          • 1970-01-01
          • 2021-09-11
          • 1970-01-01
          • 2020-09-21
          • 1970-01-01
          • 2018-03-10
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多