Question

没有其他方法可以在jquery数据表上设置固定标题吗？

当我尝试使用固定标题时，警告滚动数据表不支持固定标题2 :(

有谁知道如何解决这个问题？

这是我的脚本：

<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
    var oTable = $('#tabel_daftar_all').dataTable( {
        "bJQueryUI": true,
        "bPaginate": false,
        //"iDisplayLength": 5,
        //"aLengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
        //"iDisplayStart": 5,
        //"sPaginationType": "full_numbers",
        "sScrollX": "100%",
        //"sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bFilter": false
    } );    
    new FixedColumns( oTable, {
        "iLeftColumns": 4,
        "iLeftWidth": 350
    } );

    //new FixedHeader( oTable );
    //$('#tabel_daftar_all').dataTable().rowGrouping();
} );
</script>

Answer 1

目前没有，不支持FixedHeader滚动 - 我确信它完全可以添加该功能，但截至目前，我没有时间这样做！难道你不能只启用Y滚动吗？它实现了相同的效果，虽然它滚动内部元素（已经是X滚动）而不是整页滚动。

Answer 2

删除行

  "sScrollX": "100%",

然后

和fixedheader将工作

Answer 3

要在jQuery Datatable中实现Fixed头，请在页眉中添加“FixedHeader.min.js”并将以下代码添加到页面：

var oFH = new FixedHeader(oTable);
$('#tablename thead th:eq(0)').html('First column');
oFH.fnUpdate();

希望这会对你有所帮助。

Answer 4

First import the FixedHeader.js file 
<script type="text/javascript" charset="utf-8"    src="RELATIVE_PATH/fixedHeader.js">
</script> 

And then add following code to you html/ftl file
<script type="text/javascript">
         $(document).ready(function() {
     var table = $('#employeeDetails').DataTable();
    new $.fn.dataTable.FixedHeader( table );
} );
      </script>

..............Hope, This works fine.

Answer 5

我有一个用例，需要scrollX，fixedColumn和fixedHeader。我找不到任何解决方案。而且，根据Datatables，fixedHeader和fixedColumn不兼容。我使用自定义JS和CSS解决了这个问题。

 $(document).off("scroll");
    var posFromTop = $('.dataTables_scrollHead').offset().top;  //Initial position on page
    var navHeight = $('nav').height() // Height of navbar (offset for sticky header)
    var firstColOffsetAdjustment = 0 - $('.dataTables_scroll').find('thead tr').height(); 
    var initialMargin = $('.DTFC_LeftWrapper').css('margin-top')
    var initialTableWidth = $('.dataTables_scrollBody').width();
    $(document).on("scroll", function(e){
        if(($(window).scrollTop()+navHeight-25) >= posFromTop){
            $('.dataTables_scrollHead').addClass('sticky-thead');
            $('.dataTables_scrollHead').css('width', initialTableWidth+'px');
            $('.DTFC_LeftWrapper').css('margin-top', firstColOffsetAdjustment+"px");
        }else{
            $('.dataTables_scrollHead').removeClass('sticky-thead');
            $('.DTFC_LeftWrapper').css('margin-top', initialMargin);
        }
    })


.sticky-thead{
      position: fixed !important;
      top: 64px;
      z-index: 1000;
 }

这对我有用。希望它有所帮助：）

修复了jquery数据表上的标题

5 个答案: