ColResize doesn't work with FixedHeader plugin

[raz3r]

I am using FixedHeader plugin but for some reason it looks like it is incompatible with ColResize. Is there a workaround? Thanks.

[maca88]

Hello,

ColResize should work with FixedHeader, you can see it HERE.

[raz3r]

I am using dataTables 1.10.4 and it doesn't work :( I should say that I am using Bootstrap as well.

[maca88]

I've updated the above example using bootstrap LINK. Can you edit the above example with your configuration so that I can see what's the problem?

[raz3r]

The example is not available anymore :( Anyway here's my code, that way you can also see what versions I am using.

Bootstrap 3.3.2 JQuery 1.11.2 Angular JS 1.2.28 DataTables 1.10.4

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/colreorder/1.1.2/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="js/dataTables.colResize.js"></script>
<link rel="stylesheet" href="css/dataTables.colResize.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/colreorder/1.1.2/css/dataTables.colReorder.css">
<link rel="stylesheet" href="//cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css">
<link rel="stylesheet" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css">

var tableDocumentList = $('#documentList').DataTable({
    "dom": 'JT<"clear">C<"clear">Rlfrtip',
});
new $.fn.dataTable.FixedHeader(tableDocumentList);

[raz3r]

That looks cool, if I use

colResize: {
    fixedHeader: {
    }
},

instead of

new $.fn.dataTable.FixedHeader(tableDocumentList);

it seems to work...

[maca88]

There are two way to initialize colResize:

1. Using the dom feature 'J' as you did

$('#table').DataTable({
colResize: {
    fixedHeader: true
},
    "dom": 'JT<"clear">C<"clear">Rlfrtip',
});

2. Using the api extension method (note that there is no J in the dom)

var table = $('#table').DataTable({
    "dom": 'T<"clear">C<"clear">Rlfrtip',
});
table.colResize.init({
        fixedHeader: true
       });

[wschmitz]

How do I get a hold of the initialized FixedHeader instance that was created with the 'new' keyword? I want a handle to the equivalent of fixedTbl in this example: var fixedTbl = new $.fn.dataTable.FixedHeader( table, oInit);

My code currently initializes FixedHeader like this and I don't have a reference to the new instance:

        var table = $(this).DataTable({
                      "filter": false
                    , "sort": false
                    , "paginate": false
                    , "autoWidth": false
                    , "bInfo" : false
                    , "dom": "Jt"
                    , colResize: {
                        fixedHeader: {
                              "bottom": true
                            , "zTop": 'auto'
                        }
                    }
                });

Thanks in advance!

[maca88]

You can check HERE how to get the FixedHeader instance. Can I ask you why do you need that instance?

[wschmitz]

Hi there, this approach only works if the table is loaded via AJAX. If I comment out ajax: "/ajax/objects.txt" in opts, the console logs don't show. In my app, I use these plugins to enhance an existing HTML table, we paginate on the server side, so all the data loading and pagination controls etc are rendered on the sever side. With regards to why I need a reference to the FixedHeader instance - I need to update the display of the cloned headers on browser resize. Currently, the cloned headers do not "repaint" unless _fnUpdateClones(true) is called with true as the argument. By default, FixedHeader only calls _fnUpdateClones() on window resize.

[maca88]

Thanks for the explanation. For get the FixedHeader instance without using ajax property check HERE.