Datatable width changes on sort??
Datatable width changes on sort??
1kgcoffee
Posts: 6Questions: 3Answers: 0
I notice a strange problem with my datatables.
The data loads and sorts perfectly, but when it is first initiated the table head is smaller in width than the table rows. When I press a sort button in any table head it automatically puts it to the size that it should be. How do I fix this? As this works on serverside script to load the table, I can only provide the code and not a working example Thanks in advance for any help
`const compressors = ['cm101', 'cm201', 'cm301'];
compressors.forEach(compressor => {
window[compressor + '_chart_table'] = $('#' + compressor + '_chart_table').DataTable({
"retrieve": true,
"fixedColumns": true,
"scrollCollapse": true,
//"scrollX": true,
"scrollY": 200,
"paging": false,
"searching": false,
"ordering": true,
"processing": true,
"serverSide": true,
"responsive": true,
"info": true,
"ajax": {
"url": "fetch_compressor_chart_tables.php",
"type": "POST",
"data": {
"compressor": compressor
}
},
});
});`
and the html
<div class="container ms-1 nowrap">
<div class="row flex-nowrap align-items-start">
<div class="col-sm-4 mt-2">
<h4 class="bg-dark text-light px-2 py-1">CM101</h4> (buttons for 7 days, 14 days, 30 days and custom)
<canvas class="col-sm-4" id="CM101Chart"></canvas>
</div>
<div class="col-sm-8 mt-2">
<table id="cm101_chart_table" class="compact nowrap display table table-dark table-hover">
<thead>
<tr class="width=">
<th>Date-Time</th>
<th>Runtime</th>
<th>Suction</th>
<th>Disch °C</th>
<th>Disch kPa</th>
<th>Oil °C</th>
<th>Water °C</th>
</tr>
</thead>
</table>
</div>
</div>
<!--repeat the table another two time for each comp-->
</div>
Answers
If you can't link to your own page, you can use this as a template to modify and show the issue.
I'm afraid I will need a test case to be able to offer any help. As you will see with the examples on this site, the table should stay the same width.
Allan
Thanks for the response, it is reproducing in the fiddle, just in a very subtle way. As you can see when first running the script the right header elements are aligned to the left. But when hitting the sort, they align to the right. I believe this is whats causing it to go to 100% width in my offline example as the headers also jump to the right.
https://live.datatables.net/gafawoha/2/
In my own example there are date times in the first column. If you can imagine some of them are significantly longer, and those are positioned out of sight when the table is first initiated. So when they jump to the top the table takes up more of the container and some of column headers jump to the right as shown above, if that makes sense?
@aalan the same issue is found in this thread. See my last comment in the thread. Looks like the type class is applied to only the
thwhen the column is sorted and with server side processing.Kevin
@kthorngren thanks for the response. I tried adding in
DataTable.types().forEach(type => {DataTable.type(type, 'detect', () => false);});Before the Datatable was initialized. No change in my example. However, when I comment out scrollY, it works perfectly **without ** modification to DataTable.type. The problem here is that I need scrollY to get the effect that I want. Does this mean that the type class is not applied with vertical scrolling enabled?
No, type detection and class assignment work when using scrolling. As Kevin says, this is a server-side processing issue. I will make a change to DataTables to not run type detection on server-side processing data I think. That will probably be part of DataTables 2.1, where I plan to make some changes to the type detection.
For the moment, a CSS override would be the way to address it.
Allan