scrollY function disable 'autoWidth' and display hidden columns

mori_italy

i have this simple file: first of all i configure DataTables:
<link rel="stylesheet" href="assets/DataTables/DataTables-1.10.19/css/jquery.dataTables.min.css"/> <script src="assets/DataTables/DataTables-1.10.19/js/jquery.dataTables.min.js"></script> <script src="assets/DataTables/plug-ins/1.10.19/sorting/date-eu.js"></script> <link rel="stylesheet" type="text/css" href="assets/DataTables/buttons-1.5.6/css/buttons.dataTables.min.css"/> <script src="assets/DataTables/buttons-1.5.6/js/dataTables.buttons.min.js"></script> <script src="assets/DataTables/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="assets/DataTables/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <script src="assets/DataTables/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> <script src="assets/DataTables/buttons-1.5.6/js/buttons.html5.min.js"></script> <script src="assets/DataTables/buttons-1.5.6/js/buttons.colVis.min.js"></script> <script src="assets/DataTables/buttons-1.5.6/js/buttons.print.min.js"></script> <link rel="stylesheet" type="text/css" href="assets/DataTables/ColReorder-1.5.1/css/colReorder.dataTables.min.css"/> <script src="assets/DataTables/ColReorder-1.5.1/js/dataTables.colReorder.min.js"></script> <script src="assets/js/bootstrap.js"></script>

Second: this is my table:

<table id="showdata" class="display table table-striped" width="auto">  
        <thead>  
          <tr>  
            <th>DATA</th>  
            <th>EMPName</th>  
            <th>Country</th>  
            <th>Salary</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>12/05/2018</td>  
            <td>Anusha</td>  
            <td>India</td>  
            <td>1</td>  
          </tr>  
          <tr>  
            <td></td>  
            <td>Charles</td>  
            <td>United Kingdom</td>  
            <td>10</td>  
          </tr>  
           </tbody>  
      </table>```
**Third: js configuration:  **

$(document).ready(function(){$('#showdata').dataTable({ columnDefs:[ {type: 'date-eu',targets:0}, {targets:0,className:'noVis'} ], // 'scrollY':300, // 'scrollX': true, 'searching':true, 'ordering':true, 'paging':true, 'lengthMenu':[[10, 50, 100, -1], [10, 50, 100, 'Tutti']], 'colReorder':true, 'autoWidth':true, dom: 'B<"clear">lfrtip',buttons:[ {extend:'colvis',text:'Mostra / nascondi colonne',columns:':not(.noVis)'}, {extend:'copy',text:'Copia la tabella',exportOptions:{columns:[1,2]}}, {extend:'print',text:'Stampa',exportOptions:{columns:[1,2]}}, {extend:'csvHtml5',text:'CSV',extension:'filecsv.csv',exportOptions:{columns:[1,2]}}, {extend:'excelHtml5',text:'XLS',extension:'filexls.xlsx',exportOptions:{columns:[1,2]}}, {extend:'pdfHtml5',text:'PDF',extension:'filepdf.pdf',exportOptions:{columns:[1,2]}}, ] })});

PROBLEM: when i active 'scrollY':300 (because i want to fix header of the table), the first column ("DATA") is shown, and autoWidth is disabled.

someone can help me ?
Thanks !!!!!!!!!!!!!!!!!!

mori_italy

i forgot this css (that hide the first column):

-*:nth-child(1)-{display:-none;}">-*:nth-child(1)-{display:-none;}" href="#showdata-tr->-*:nth-child(1)-{display:-none;}">showdata tr > *:nth-child(1) {display: none;}

colin

Hi @mori_italy ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

mori_italy

And also ,there is another bug: when i drag to the left the second column ("country"), the column "DATA"i si dislayed !!!

mori_italy

i'm not sure that is wright !:

http://live.datatables.net/wopisasa/1/

colin

Hi @mori_italy ,

One issue is hiding the column in the CSS - it's better to use columns.visible, that way, DataTables is in control of it. See updated example here.

Cheers,

Colin

mori_italy

thanks ! But the autowidth is always disabled ? Why ?

colin

Hi @mori_italy ,

What makes you think it's disabled?

Cheers,

Colin

mori_italy

see this: http://live.datatables.net/wagarito/1

colin

Yep, that's enabled as expected. You can tell by setting the value to false and then resizing the window, you'll notice that the header loses alignment with the body.