数据表标题行在水平滚动表行时不移动

Datatable Header row is not moving while horizontally scrolling table row

提问人:user3521051 提问时间:4/10/2020 最后编辑:user3521051 更新时间:4/11/2020 访问量:924

问:

我有一个服务器端数据表。这里的垂直滚动是工作文件。但是由于列的数量很大,当我将scrollH激活为true时,表格的标题没有移动/滚动。但表格行正在滚动。 我在 stackoverflow 中阅读了很多线程,例如 scrollH:100 等。但没有一个对我有用。 如果有人能给一些光明,请,

HTML 页面

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

This way screen loads

This is the view after horizontally scrolled

html 滚动 数据表 服务器端

评论

0赞 user3521051 4/11/2020
我以这种方式修改了代码 sScrollX: true, scrollY: 120, scrollH: true, 现在它正在工作

答:

0赞 user3521051 4/11/2020 #1

我以这种方式修改了代码

sScrollX: true, 
scrollY: 120, 
scrollH: true, 

现在它正在工作