Open raz3r opened 9 years ago
I am using dataTables 1.10.4 and it doesn't work :( I should say that I am using Bootstrap as well.
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?
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);
That looks cool, if I use
colResize: {
fixedHeader: {
}
},
instead of
new $.fn.dataTable.FixedHeader(tableDocumentList);
it seems to work...
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
});
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!
You can check HERE how to get the FixedHeader instance. Can I ask you why do you need that instance?
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.
I am using FixedHeader plugin but for some reason it looks like it is incompatible with ColResize. Is there a workaround? Thanks.