scrollY function disable 'autoWidth' and display hidden columns
scrollY function disable 'autoWidth' and display hidden columns
mori_italy
Posts: 11Questions: 3Answers: 0
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: **
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 !!!!!!!!!!!!!!!!!!
Answers
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;}
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
And also ,there is another bug: when i drag to the left the second column ("country"), the column "DATA"i si dislayed !!!
i'm not sure that is wright !:
http://live.datatables.net/wopisasa/1/
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
thanks ! But the autowidth is always disabled ? Why ?
Hi @mori_italy ,
What makes you think it's disabled?
Cheers,
Colin
see this: http://live.datatables.net/wagarito/1
Yep, that's enabled as expected. You can tell by setting the value to
falseand then resizing the window, you'll notice that the header loses alignment with the body.