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上修復頭文件

回答

相關問題