jquery datatables上修复头文件

是否有没有其他方法来设置jquery数据表上的固定头文件？jquery datatables上修复头文件

当我尝试使用固定头，还有的警告固定头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>

来源

2012-02-26 Xinez

目前没有，FixedHeader不支持滚动 - 我相信它完全可以添加该功能，但到目前为止，我还没有时间这样做！难道你不能只启用Y滚动它实现了很多相同的效果，尽管其滚动一个内部元素（它已经是X-Scrolling）而不是整页滚动。

来源

2012-02-26 10:17:56

删除线

"sScrollX": "100%",

然后fixedheader将工作

来源

2012-07-31 18:17:31

对于jQuery的数据表执行固定头，请加“FixedHeader.min.js”在页眉和下面的代码添加到页面：

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

希望这会对你有帮助。

来源

2014-04-11 12:41:45

我正面临着一些问题在jquery datatable与固定标题。 – SivaRajini 2014-04-22 10:18:50

固定标题poistion仍然是绝对唯一的事件即使我滚动.top位置不会改变..可能是什么原因？ – SivaRajini 2014-04-22 10:19:54

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.

来源

2015-07-08 07:14:28 Akshada

我有一个用例，需要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; 
}

这对我有效。希望它有帮助:)

来源

2018-01-17 07:18:31

jquery datatables上修复头文件

回答

相关问题