Improve table header view using bootstrap 3.0.0, datatables and fixedHeader

Question

I’m using in a system the bootstrap, datatables and fixedHeader, I’m in three trouble:

1. I would need that header (thead) table stops before the end of the menu, gets below the menu, it’s stopping at the top of the page, has how to do this?

2. When I open the dialog (by clicking on link of each line at the end) thead is behind the dialog, but it is the only element that is not behind the modal (I think that’s it);

3. When I click on a menu, the sub-menu items are also behind the thead;

HTML, I wouldn’t like to leave it here, because it’s a bit long, but if it is the case, I even put;

The JS to do this is this

var oTable = $('#example').dataTable({
    "paging": false,
    "info": false
});

new $.fn.dataTable.FixedHeader( oTable, {
  "zTop": "1035"
});

Follow the codes here http://jsbin.com/regetiyaki/1/edit?html,css,js

And here already running the example http://jsbin.com/regetiyaki/1/

PS: I am currently with bootstrap version 3.0.0 and I cannot upgrade to the current version, in this case, 3.3.5, I did this test and in this case I would solve my question 2, but unfortunately I do not have to do this update.

Follows a print of mistakes, you can already see that the thead is above the menu (at the top of the page) and is not behind the modal.

Answer 1

Marcelo,

You can use the offsetTop to do this, example:

    var oTable = $('#example').dataTable({
        "paging": false,
        "info": false
    });

    new $.fn.dataTable.FixedHeader(oTable, {
        "offsetTop": 50
    });

Working example: JSFIDDLE