Header problem with Scroller version 1.4.0

spatteet

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();
}
});
});
});

allan

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

spatteet

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: ''
},

allan

If you want I can send you the complete project in zip file.

If it runs without server-side code, that would be great. allan @ this domain.net.

Allan

spatteet

It is a local project.
Just sent you an email with the link to download.

allan

Thanks - I'll try to take a look in the next few days. Probably next week now.

Allan

allan

Hi,

A couple of things happening here:

1. There is a bug in Responsive whereby it don't initialise correctly with a scrolling table. I've just committed the fix and the nightly is up to date
2. You need to enable scrollX for the table as it is so wide
3. Child rows do not work with Scroller - it really messes up the calculations. If you want to use Scroller you'd need to use a modal display, or a custom display method.
4. Rather than using none in Responsive 2, I'd suggest you hide the columns (or even better, just don't include them at all!):

            columnDefs: [
                { targets: 'none', visible: false }
            ],

With all of the above, the table should work correctly :-)

Allan

spatteet

I will check into all of this and will let it know if it works.
Thank you very much for all the effort!

spatteet

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.