It gives more flexibility to the user by allowing them to hide and show those columns which they don’t want to see on the list.
You can do this with jQuery by toggling the specific columns according to the selection.
In the demonstration, I am creating a table layout for listing the employee details and use checkboxes to hide and show the table columns using jQuery.
Contents
1. Table structure
I am using employee table to list the records in the <table >.
CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` varchar(100) NOT NULL, 'salary' varchar(20) NOT NULL, 'gender' varchar(10) NOT NULL, 'city' varchar(80) NOT NULL, 'email' varchar(100) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Configuration
Create config.php file for the database connection.
Completed Code
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}
3. HTML and PHP
I am using PHP only to fetch records from the database and using that data to create new rows in the <table>.
With <table > also creating 6 checkboxes for each table column – S.no, Name, Salary, Gender, City, and Email. According to the check uncheck state on the checkbox toggle the columns using jQuery.
I have created checkboxes id like – col_1, col_2, col_3, etc. according to the position of the table columns.
Completed Code
<?php
include("config.php");
?>
<div class="container">
<div>
<strong>Checked the Checkbox for Hide column</strong>
<input type="checkbox" class="hidecol" value="name" id="col_2" /> Name
<input type="checkbox" class="hidecol" value="salary" id="col_3" /> Salary
<input type="checkbox" class="hidecol" value="gender" id="col_4" /> Gender
<input type="checkbox" class="hidecol" value="city" id="col_5" /> City
<input type="checkbox" class="hidecol" value="email" id="col_6" /> Email
</div>
<table width="100%" id="emp_table" border="0">
<tr class="tr_header">
<th>S.no</th>
<th>Name</th>
<th>Salary</th>
<th>Gender</th>
<th>City</th>
<th>Email</th>
</tr>
<?php
// selecting rows
$sql = "SELECT * FROM employee ORDER BY ID ASC";
$result = mysqli_query($con,$sql);
$sno = 1;
while($fetch = mysqli_fetch_array($result)){
$name = $fetch['emp_name'];
$salary = $fetch['salary'];
$gender = $fetch['gender'];
$city = $fetch['city'];
$email = $fetch['email'];
?>
<tr>
<td align='center'><?php echo $sno; ?></td>
<td align='center'><?php echo $name; ?></td>
<td align='center'><?php echo $salary; ?></td>
<td align='center'><?php echo $gender; ?></td>
<td align='center'><?php echo $city; ?></td>
<td align='center'><?php echo $email; ?></td>
</tr>
<?php
$sno ++;
}
?>
</table>
</div>
4. jQuery
When the checkbox element gets clicked then split the element id and get the column number.
Check whether the element is checked or not if checked then select the table column using nth-child() method where to pass the column number and call the hide() method.
Perform its opposite if the element is not checked.
Completed Code
$(document).ready(function(){
// Checkbox click
$(".hidecol").click(function(){
var id = this.id;
var splitid = id.split("_");
var colno = splitid[1];
var checked = true;
// Checking Checkbox state
if($(this).is(":checked")){
checked = true;
}else{
checked = false;
}
setTimeout(function(){
if(checked){
$('#emp_table td:nth-child('+colno+')').hide();
$('#emp_table th:nth-child('+colno+')').hide();
} else{
$('#emp_table td:nth-child('+colno+')').show();
$('#emp_table th:nth-child('+colno+')').show();
}
}, 1500);
});
});
5. Demo
6. Conclusion
To show and hide the table column on check box check uncheck I used nth-child() function for selecting the column and calling a required method e.g. hide() or show().
