How to align table header and column data after hiding columns
How to align table header and column data after hiding columns
shihoru
Posts: 6Questions: 2Answers: 0
Hello, I am having trouble when trying to hide columns.
Currently, I have 37 columns with both horizontal and vertical scrolling. I am trying to implement a filter function where users can hide columns they do not want to see after the table is loaded. However, when I am hiding the columns, the header and data are aligned until when the number of columns do not require horizontal scrolling anymore. When that happens, the header is aligned to the left while the data is aligned to the center. Furthermore, since I have vertical scroll enabled with sticky headers, the sticky headers aligns with the data columns after horizontal scroll is not required by the table which made me very confused.
The codes that are used for hiding the columns are from https://datatables.net/release-datatables/examples/api/show_hide.html and the place for selecting the columns to be hidden is a collapsible element containing the options with a checkbox. This checkbox is also not working when I click on it, the checkbox does not appear but the column selected is hidden.
I have tried using columns.adjust() but it did not work. I may have used it wrongly. I have also tried using 'colvis' but the issue got worse. If you require me to explain what happened using 'colvis' I will explain.
Here are the codes used (I have removed some lines of codes which I think is irrelevant to this issue due to character limit and removed some columns to reduce the length of the code):
This code is for viewing and loading the table with a button as well as hiding columns.
tableview.php
<html>
<head>
<link rel="stylesheet" href="bootstrap-5.1.1.css">
<link rel="stylesheet" href="jquery.dataTables.css">
<link rel="stylesheet" href="datatables.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class='date-bg'>
<div class='dateinput'>
<label class='sdate'>Start date:</label><input type="text" id="sdate" name="sdate" placeholder="YYYY-MM-DD hh:mm:ss">
</div>
<div class='dateinput'>
<label class='edate'>End date:</label><input type="text" id="edate" name="edate" placeholder="YYYY-MM-DD hh:mm:ss">
</div>
<div class='loadButton'>
<button type="button" id="loadTable" name="loadTable">Submit</button>
</div>
</div>
<div class="new-line">
<button class="collapsible">Filter</button>
<div class="content">
<span><b>Select columns to be hidden:</b></span> <br>
<table id='filter_table'>
<tr>
<td><span><label for="c1">Column 1: </label></span> <input type="checkbox" id="c1" class="toggle-vis checkbox" data-column="0" name="c1"></td>
<td><span><label for="c2">Column 2: </label></span> <input type="checkbox" id="c2" class="toggle-vis checkbox" data-column="1" name="c2"></td>
<td><span><label for="c3">Column 3: </label></span> <input type="checkbox" id="c3" class="toggle-vis checkbox" data-column="2" name="c3"></td>
<td><span><label for="c4">Column 4: </label></span> <input type="checkbox" id="c4" class="toggle-vis checkbox" data-column="3" name="c4"></td>
<td><span><label for="c5">Column 5: </label></span> <input type="checkbox" id="c5" class="toggle-vis checkbox" data-column="4" name="c5"></td>
</tr>
<tr>
<td><span><label for="c6">Column 6: </label></span> <input type="checkbox" id="c6" class="toggle-vis checkbox" data-column="5" name="c6"></td>
<td><span><label for="c7">Column 7: </label></span> <input type="checkbox" id="c7" class="toggle-vis checkbox" data-column="6" name="c7"></td>
<td><span><label for="c8">Column 8: </label></span> <input type="checkbox" id="c8" class="toggle-vis checkbox" data-column="7" name="c8"></td>
<td><span><label for="c9">Column 9: </label></span> <input type="checkbox" id="c9" class="toggle-vis checkbox" data-column="8" name="c9"></td>
<td><span><label for="c10">Column 10: </label></span> <input type="checkbox" id="c10" class="toggle-vis checkbox" data-column="9" name="c10"></td>
</tr>
<tr>
<td><span><label for="c11">Column 11: </label></span> <input type="checkbox" id="c11" class="toggle-vis checkbox" data-column="10" name="c11"></td>
<td><span><label for="c12">Column 12: </label></span> <input type="checkbox" id="c12" class="toggle-vis checkbox" data-column="11" name="c12"></td>
<td><span><label for="c13">Column 13: </label></span> <input type="checkbox" id="c13" class="toggle-vis checkbox" data-column="12" name="c13"></td>
<td><span><label for="c14">Column 14: </label></span> <input type="checkbox" id="c14" class="toggle-vis checkbox" data-column="13" name="c14"></td>
<td><span><label for="c15">Column 15: </label></span> <input type="checkbox" id="c15" class="toggle-vis checkbox" data-column="14" name="c15"></td>
</tr>
</table>
</div>
<div id="big_table">
<table id="data_table" class="table table-hover display nowrap row-border cell-border hidden">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="jquery-3.6.0.js"></script>
<script src="jquery.dataTables.js"></script>
<script src="bootstrap-5.1.3.js"></script>
<script src="datatables.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is the script used to hide the columns
script.js
$(document).ready(function(){
$("#loadTable").one("click", function()
{
$("#data_table").removeClass("hidden");
var table = $('#data_table').DataTable({
"scrollX": true,
"scrollY": "400px",
"fixedHeader": true,
"processing": true,
"serverSide": true,
"bFilter": false,
"ajax": {
"url": "serverScript.php",
"type": "POST",
"data": function(d){
d.sdate = $("#sdate").val(); // Get the values directly from the inputs
d.edate = $("#edate").val();
}
}
});
});
$('input.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = $('#data_table').DataTable().column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
$('#data_table').DataTable().columns.adjust().draw();
});
// Create event to update Datatable
$("#loadTable").click(function()
{
$('#data_table').DataTable().ajax.reload();
});
});
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++)
{
coll[i].addEventListener("click", function ()
{
this.classList.toggle("active_collapsible");
var content = this.nextElementSibling;
if (content.style.maxHeight)
{
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
Here is the custom css used
styles.css
#big_table
{
margin-top: 10px;
}
th
{
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
text-align: center;
}
th:first-child
{
border-left: 1px solid #dddddd;
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
margin-top: 10px;
}
.collapsible:hover
{
background-color: #555;
}
.collapsible:after
{
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active_collapsible:after
{
content: "\2212";
}
.content
{
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
input.checkbox
{
transform: scale(2);
margin: 30px;
position: relative;
white-space: nowrap;
vertical-align: middle;
flex-wrap: wrap;
}
label
{
position: relative;
display: inline-block;
vertical-align: middle;
}
#filter_table td
{
text-align: right;
}
.hidden
{
display: none;
}
#filter_table
{
margin: 0 auto;
}
#data_table
{
width: 100%;
}
The loading of the table is done using the server side processing using the codes from https://datatables.net/examples/data_sources/server_side for serverScript.php with minor modifications and https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/ssp.class.php for ssp.class.php which remains unchanged.
Thank you for the help.
This question has an accepted answers - jump to answer
Answers
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
I am unable to create a working test case due to the data not loading. I have tried using examples from here and it still did not work.
When I tried putting the data into <td> tags, I am unable to hide the column data using the code I have copied from my current project into the test case.
Currently, the test case has data in its <td> tags and link to it is here
This will be a styling issue, so we would really need to see this to make any sense of it. If you could post a link to your page that would help,
Colin
One suggestion is to use the Datatables styling integration files for Bootstrap. Use the Download Builder to generate the proper files. See the Styling docs for more details
If this doesn't help you can try updating the test case using one of the server side examples found here.
Kevin
I have updated the test case using the example and the issue I have now on my project is the same as in the test case now.
I have also tried the Download Builder to generate proper files but the problem still remains.
I also do not have a page for my project as everything is hosted locally.
Updated test case
Try adding
style="width:100%"to thetabletag as explained in the example. I was able to see the issue with your last test case. Once I addedstyle="width:100%"I don't see the issue. Updated example:http://live.datatables.net/nilekibi/3/edit
If you still see the issue please provide the exact steps to recreate the problem.
Kevin
Oh, it worked. Somehow putting
"width: 100%"in the css doesn't work. Big thanks.