Header problem with Scroller version 1.4.0
Header problem with Scroller version 1.4.0
spatteet
Posts: 5Questions: 0Answers: 0
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=0B7x1CI9xD2OnbnJGMVRPeTlvU1k
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=0B7x1CI9xD2OnVUtjVnVCeXo1ZkE
(I removed some data from the price columns)
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();
}
});
});
});
Replies
Can you link to a test page showing the issue so it can be debugged please. Also, please ensure that you are using the latest version of Scroller (1.4.0) if you aren't already.
Allan
http://live.datatables.net/logafoja/1/
The columns are not really aligned in the example but is not quite the same, it is maybe the live editor.
This is static html data and no json data load. The json data is currently 1990 records.
What I also tried is to comment out every stylesheet which is not from datatables and comment out the search boxes, but the problem remains. If you want I can send you the complete project in zip file.
Also look at the selection of the rows, in the even rows the selection disappears but stays in 1 column.
This is part of the code withe the json data:
var data = [];for (var i = 0; i < 50000; i++) {data.push([i, i, i, i, i]);}var table = $('#inventory').DataTable({ajax: {url: 'dataparcels.json',dataSrc: ''},If it runs without server-side code, that would be great. allan @ this domain.net.
Allan
It is a local project.
Just sent you an email with the link to download.
Thanks - I'll try to take a look in the next few days. Probably next week now.
Allan
Hi,
A couple of things happening here:
scrollXfor the table as it is so widenonein Responsive 2, I'd suggest you hide the columns (or even better, just don't include them at all!):With all of the above, the table should work correctly :-)
Allan
I will check into all of this and will let it know if it works.
Thank you very much for all the effort!
It is working great now!
I tried now with the combination of nightly builds for:
responsive,
scroller,
buttons,
select
I will experiment with the modal display anyway.
Even the selection of the rows is working good now.
I wanted to use the selection of the rows to be able to add them to a cart instead of using an extra "add to cart" column but it will be confusing for the user because when users have clicked on a link column before (external image in one of the columns which I show in a magnificPopup iframe), the row is also selected of course.