Функция JQuery FixedHeader

Question

Работает на странице jsp. Первая строка (заголовок) должна быть заморожена, как прокрутка вниз по странице. Я пытаюсь реализовать его с использованием функций JQuery, но не был плодотворным. Вот пример кода: рефов:

<script type="text/javascript" src="<c:url value=" /resources/js/jquery-2.1.3.js "/>"></script> 
<script type="text/javascript" src="<c:url value=" /resources/js/jquery.dataTables.min.js "/>"></script> 
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.js "/>"></script> 
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.min.js "/>"></script> 
<script> 
$(document).ready(function() { 
    $('#draytable_pickup').dataTable({ 
     "paging": true, 
     "ordering": true 
    }); 

    // $('#draytable_pickup').addClass('fixed');   
}); 

$(document).ready(function() { 
    $('#draytable_pickup').fixedHeaderTable('show'); 
}); 
</script> 
<table id="draytable_pickup" class="table table-hover table-striped table-bordered table-condensed small" data-link="row"> 
    <thead> 
     <tr> 
     .... 
     .... 
     </tr> 

Online предложения не кажется, работает для меня. Может кто-нибудь, пожалуйста, предложите мне, как это сделать?

Answer 1

Вот рабочий пример: https://jsfiddle.net/dLz8evtb/

Вот скриншот, показывающий заголовок, даже если я прокручивается весь путь до дна. Также отображаются номера страниц.

Вот JavaScript:

$(document).ready(function() { 
    var dt = $('#draytable_pickup').DataTable({ 
     "paging": true, 
     "ordering": true, 
     "pageLength": 50 
    }); 
    new $.fn.dataTable.FixedHeader(dt); 
}); 

Я установил pageLength 50, так что вы можете увидеть прокрутки проще.

Главное, что вам нужно - назначить результат вызова DataTable переменной -dt в моем коде, а затем передать его в вызов $ .fn.dataTable.FixedHeader.

Смотрите документацию: https://www.datatables.net/extensions/fixedheader/

Редактировать: Пожалуйста, обратите внимание, что оригинальный ответ был ссылку на jsfiddle что импортированной внешние файлы, используя HTTP, а не HTTPS. Это работало на некоторых браузерах, но другие блокировали это содержимое.