Posted By
Bajarangi soft ,
Posted On 22-10-2020
Step 1:Create Index.php file to implement below html code in it:
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-9">Customer Data</div>
<div class="col-lg-3">
<select name="column_name" id="column_name" class="form-control selectpicker" multiple>
<option value="0">ID</option>
<option value="1">First Name</option>
<option value="2">Last Name</option>
<option value="3">Email</option>
<option value="4">Gender</option>
</select>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Gender</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST"
}
});
$('#column_name').selectpicker();
$('#column_name').change(function(){
var all_column = ["0", "1", "2", "3", "4"];
var remove_column = $('#column_name').val();
var remaining_column = all_column.filter(function(obj) { return remove_column.indexOf(obj) == -1; });
dataTable.columns(remove_column).visible(false);
dataTable.columns(remaining_column).visible(true);
});
});
</script>
<?php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=allphptricks", "root", "");
$column = array("customerid", "customer_first_name", "customer_last_name", "customer_email", "customer_gender");
$query = "SELECT * FROM customers";
if(isset($_POST["search"]["value"]))
{
$query .= '
WHERE customerid LIKE "%'.$_POST["search"]["value"].'%"
OR customer_first_name LIKE "%'.$_POST["search"]["value"].'%"
OR customer_last_name LIKE "%'.$_POST["search"]["value"].'%"
OR customer_email LIKE "%'.$_POST["search"]["value"].'%"
OR customer_gender LIKE "%'.$_POST["search"]["value"].'%"
';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY customerid DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connect->prepare($query);
$statement->execute();
$number_filter_row = $statement->rowCount();
$result = $connect->query($query . $query1);
$data = array();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row['customerid'];
$sub_array[] = $row['customer_first_name'];
$sub_array[] = $row['customer_last_name'];
$sub_array[] = $row['customer_email'];
$sub_array[] = $row['customer_gender'];
$data[] = $sub_array;
}
function count_all_data($connect)
{
$query = "SELECT * FROM customers";
$statement = $connect->prepare($query);
$statement->execute();
return $statement->rowCount();
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => count_all_data($connect),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
<html>
<head>
<title>How To Hide Specified Column On Select Of Item In JQuery</title>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
</head>
<style>
body {
background: black;
}
</style>
<body>
<div class="container">
<br />
<h1 align="center" class="text-white"><b>How To Hide Specified Column On Select Of Item In JQuery</b></h1>
<br />
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-9">Customer Data</div>
<div class="col-lg-3">
<select name="column_name" id="column_name" class="form-control selectpicker" multiple>
<option value="0">ID</option>
<option value="1">First Name</option>
<option value="2">Last Name</option>
<option value="3">Email</option>
<option value="4">Gender</option>
</select>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Gender</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST"
}
});
$('#column_name').selectpicker();
$('#column_name').change(function(){
var all_column = ["0", "1", "2", "3", "4"];
var remove_column = $('#column_name').val();
var remaining_column = all_column.filter(function(obj) { return remove_column.indexOf(obj) == -1; });
dataTable.columns(remove_column).visible(false);
dataTable.columns(remaining_column).visible(true);
});
});
</script>
<br />
<br />
</body>
</html>