Refreshing fixedheader without paging and with the window's main scroll

drinkys1980

Hi, I have a trouble with FixedHeader, and I need to solve it. My case is the next:

I made 3 three tables with datatables (each one of the tables is in an accordion, when an user wants to consult it, each accordion is made with divs, css and jquery).

Each one of the tables has these properties (for giving an example):

    var table03 = $("#tbl_despac03ID").DataTable({
        scrollY: "100%",
        scrollX: true,
        paging: false,
        fixedHeader: {
            header: true
        },
        bPaginate: false,
        sScrollY: true,
        sScrollX: "100%",
        dom: "Bfrtip",
        buttons: [
            {
                extend: "excelHtml5",
                title: "Pendientes Por Llegada " + Date()
            }
        ]
    });

Each one of the tables has its filters:

    $("#tbl_despac03ID thead th").each( function () {
        var title = $(this).text();
        $(this).html( title + "<br /><input type=\'text\' placeholder=\'"+title+"\' />" );
    } );

The problems are:
1. When I display the table and I begin to scroll for viewing all the table, the fixedheader isn't fixing on the top, and rarely when I resize the window, the fixedheader puts on the top. The correct way is when I focus and scroll in the table, the fixedheader puts on the top, inmediately, and it hiddens when It disseapers on the window.
2. When I scroll from the "X axis", the fixedheader isn't matching with the current columns on the window.

I need a solution so that I try to resolve these problems with my 3 tables with datatables and fixedheader.
I will thank your help. See you!