Datatables pagination and FixedHeader or Scroller plugins

lucacali87

i'm using datatables with ajax retrieving data and I would like to use FixedHeader plugin to fix columns titles with the below rows.
This is the debug
http://debug.datatables.net/epazuf
Right visualization:

Wrong visualization when I scroll rows

This is part of my javascript code:

    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"));                     
                                             }
                                         },

I'm using these 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}">

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

Do you have some idea about this problem?
I tried even with Scroller, but I have other problems and it looks like uglier then FixedHeader.
I would like to have fixed header or scroller when the rows don't fill in the page.Thanks