2012-02-26 2 views
2

Нет ли других способов установить фиксированный заголовок на jquery datatables ??Исправлен заголовок на jQuery datatables

при попытке использования фиксированного заголовка, там предупреждение, что фиксированный заголовок 2 не поддерживается на прокрутке DataTables :(

делает кто-нибудь знает, как исправить это ??

вот мои скрипты:

<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> 

ответ

3

В настоящее время нет, FixedHeader не поддерживается прокруткой - я уверен, что его вполне возможно добавить эту функциональность, но пока я не успел это сделать! Не могли бы вы просто включить Y-прокрутку Он достигает такого же эффекта, хотя его прокрутка внутренний элемент (который уже X-прокрутка), а не полный прокрутка страницы.

1

Удалить линию

"sScrollX": "100%", 

и fixedheader будет работать

0

Для реализации Фиксированный заголовок в JQuery DataTable, пожалуйста, добавьте «FixedHeader.min.js» в заголовке страницы и добавить следующий код на страницу:

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

Надеюсь, это вам поможет.

+0

Я столкнулся с некоторой проблемой в jquery datatable с фиксированным заголовком. – SivaRajini

+0

фиксированный заголовок заголовка по-прежнему является абсолютным только в том случае, если я прокручиваю. Положение позиции не меняется .. что может быть причиной? – SivaRajini

0
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. 
0

У меня был прецедент, в котором нуждались 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; 
} 

Это сработало для меня. Надеюсь, это поможет :)

Смежные вопросы