I have a weird problem with the headers of my datatable with the last version of Scroller 1.4.0. After loading they appear completely misaligned, see screen capture: https://drive.google.com/open?id=0B7x1CI9xD2OnV015OTRVV0IwMW8
After I scroll until the information shows 63 to 77 of 1990 entries, the headers become aligned correctly and it is always when I arrive at 63, see capture https://drive.google.com/open?id=0B7x1CI9xD2OnZFJQa3dHRDQ3ZHc
I don't have this problem when paging is on and scrolling is off. It apprears in Chrome and Firefox. It's difficult to post in Datatables Live or JS Fiddle because of the jSON data and my project is still local. I will have a lot of work to create an example project.
These are the versions of datatables and plugins that I use: https://drive.google.com/open?id=0B7x1CI9xD2OnRWNNYXBXaEIwNTg
Reference on the PHP/HTML page:
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
javascript:
$(document).ready(function () {
```// Setup - add a text input to each footer cell```
```$('#inventory tfoot th').not(":eq(0)").each(function () {```
``` var title = $('#inventory thead th').eq($(this).index()).text();```
``` $(this).html('<input type="text" placeholder="' + title + '" />');```
```});```
```var table = $('#inventory').DataTable({```
``` ajax: {```
``` url: 'dataparcels.json',```
``` dataSrc: ''```
``` },```
``` "deferRender": true,```
``` responsive: {```
``` details: {```
``` type: 'column'```
``` }```
``` },```
``` select: {```
``` style: 'multi'```
``` },```
``` columns: [```
``` {data: null,```
``` className: 'control',```
``` defaultContent: '',```
``` orderable: false,```
``` searchable: false,```
``` targets: 0},```
``` {"data": "Shape"},```
``` {"data": "Parcel"},```
``` {"data": "Cert",```
``` "render": function (data) {```
``` return data.length > 1 ? '<a class="cert" href="' + data + '" target="popup"><img src="_layout/images/File16.png"></a>' : data;```
``` },```
``` className: "dt-center",```
``` orderable: false,```
``` searchable: false```
``` },```
``` {"data": "Lab", className: "dt-center"},```
``` {"data": "Weight", className: "dt-center"},```
``` {"data": "Col", className: "dt-center"},```
``` {"data": "Clar", className: "dt-center"},```
``` {"data": "Fluo", className: "dt-center"},```
``` {"data": "Pol", className: "dt-center"},```
``` {"data": "Sym", className: "dt-center"},```
``` {"data": "Table", className: "dt-center"},```
``` {"data": "Depth", className: "dt-center"},```
``` {"data": "Disc", className: "dt-right"},```
``` {"data": "RAPCt", className: "dt-right"},```
``` {"data": "PPC", className: "dt-right"},```
``` {"data": "Tot Price", className: "dt-right"},```
``` {"data": "Diameter", className: "dt-center"},```
``` {"data": "Cut", className: "dt-center"},```
``` {"data": "H_A", className: "dt-center"},```
``` {"data": "FMK", className: "dt-center"},```
``` {"data": "Pic",```
``` "render": function (data) {```
``` return data.length > 1 ? '<a href="' + data + '" target="popup"><img src="_layout/images/Pic16.png"></a>' : data;```
``` },```
``` className: "dt-center",```
``` orderable: false,```
``` searchable: false```
``` },```
``` {"data": "Pic360",```
``` "render": function (data) {```
``` return data.length > 1 ? '<a href="' + data + '" target="popup"><img src="_layout/images/Pic16.png"></a>' : data;```
``` },```
``` className: "dt-center",```
``` orderable: false,```
``` searchable: false```
``` },```
``` {"data": "Location", className: "dt-center"}],```
``` "order": [[2, 'asc']],```
``` "scroller": true,```
``` "scrollY": "50vh",```
``` "scrollCollapse": true, ```
``` "dom": '<"top"f<"clear">>ir<t>B',```
``` buttons: [```
``` 'excelHtml5',```
``` 'pdfHtml5',```
``` 'selectNone',```
``` {text: 'Reload',```
``` action: function (e, dt, node, config) {```
``` dt.ajax.reload();```
``` }```
``` }```
``` ]```
```});```
```//lengthmenu -> add a margin to the right and reset clear ```
```$(".dataTables_length").css('clear', 'none');```
```$(".dataTables_length").css('margin-right', '20px');```
```$(".dataTables_length").css('padding-left', '2em');```
//info -> reset clear and padding
$(".dataTables_info").css('clear', 'none');
$(".dataTables_info").css('padding', '0');
```// Apply the search```
```table.columns().every(function () {```
``` var that = this;```
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});