Javascript Datatables分页和FixedHeader或Scroller插件

我正在使用datatables和ajax来检索数据，我想使用FixedHeader插件来修复具有以下行的列标题。 这是调试 右侧可视化：

错误的想象

这是我的javascript代码的一部分：

if ( ! $.fn.DataTable.isDataTable( '#datatableTable' ) ) {
        datatableTable = $('#datatableTable').DataTable({
            responsive: true,
            fixedHeader: {
                header: true
            },
            columnDefs: [
                         { "width": "25%", "targets": 4},
                         {
                             targets: [4,5,7],
                             //set priority to column, so when resize the browser window this botton stay on the screen because have max priority
                             responsivePriority: 1,
                             orderable: false,
                             searchable: false,
                         },
                         {
                             targets: [6],
                             //set priority to column, so when resize the browser window this botton stay on the screen because have max priority
                             orderable: false,
                             searchable: false,
                         }
                         ],
                         //fix problem with responsive table
                         "autoWidth": false,
                         "ajax":{ 
                             "url":  "datatable/" + $("#selectedCar").val(),
                             "dataSrc": function ( json ) {
                                 if (typeof json.success == 'undefined')
                                     window.location.href = "/DART/500";
                                 else if (json.success){
                                     return json.result.data;
                                 }else{
                                     notifyMessage(json.result, 'error');   
                                     return "";
                                 }                          
                             }, 
                             "error": function (xhr, error, thrown) {
                                 window.location.href = "/DART/500";
                             }
                         },
                         "columns": [
                                                        { "data": "date",
                                         "render": function (data) {
                                             return (moment(data).format("DD/MM/YYYY"));                     
                                         }
                                     },

我正在使用这些css

<link rel="stylesheet"
    th:href="@{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
    th:href="@{/static/assets/plugins/datatables/extensions/FixedHeader/css/fixedHeader.bootstrap.min.css}">
<link rel="stylesheet"
    th:href="@{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<link rel="stylesheet"
    th:href="@{/static/assets/plugins/datatables/extensions/Select/css/select.dataTables.css}">

还有这些javascript

<!-- DataTables -->
<script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/extensions/Select/js/dataTables.select.min.js}"></script>
<script type="text/javascript"
    th:src="@{/static/assets/plugins/datatables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js}"></script>

你对这个问题有什么看法吗？ 我甚至尝试使用Scroller，但我还有其他问题，它看起来比FixedHeader更难看。 我想有固定的标题或滚动时，行不填写在页面上。谢谢