У меня есть данные на стороне сервера. здесь вертикальная прокрутка это рабочий файл. Но так как количество столбцов велико, когда я активировал scrollH как true, заголовок таблицы не перемещается / прокручивается. но строка таблицы прокручивается. Я прочитал много потоков в stackoverflow, например, scrollH: 100 et c. Но никто не работал для меня. Если кто-то может дать немного света, пожалуйста,
HTML Page
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables.scroller.js"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
serverSide: true,
ajax:{
url :"jobshistory.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="11">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
},
dom: "frtiS",
scrollY: 120,
scrollH: true,
deferRender: true,
scrollCollapse: true,
scroller: {
loadingIndicator: true
},
aaSorting: [[11, 'desc']]
} );
$("#employee-grid_filter").css("display","none"); // hiding global search box
} );
</script>
<div class="">
<div class='scroll'>
<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display nowrap" width="100%">
<thead>
<tr>
<th>Well</th>
<th>Job</th>
<th>Act Date</th>
<th>Rush</th>
<th>LQC</th>
<th>F Pr</th>
<th>Prnt</th>
<th>Sign</th>
<th>Dispat</th>
<th>Epinet</th>
<th>Date of loading</th>
<th>User</th>
<th>Time of Edit</th>
</tr>
</thead>
</table>
</div>
</div>
