How To Align Table Header And Column Data After Hiding Columns

Trang chủ » Html Table Th Hide Column » How To Align Table Header And Column Data After Hiding Columns

Có thể bạn quan tâm

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.

Từ khóa » Html Table Th Hide Column