load_data_select
<?php
//load_data_select.php
$connect = mysqli_connect("localhost", "root", "", "ajaxtest");
function fill_brand($connect)
{
$output = '';
$sql = "SELECT * FROM brand";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["brand_id"].'">'.$row["brand_name"].'</option>';
}
return $output;
}
function fill_product($connect)
{
$output = '';
$sql = "SELECT * FROM product";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
echo '<tr>';
echo '<td>'.$row["product_id"].'</td>';
echo '<td>'.$row["product_name"].'</td>';
echo '<td>'.$row["brand_id"].'</td>';
echo '</tr>';
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Multiple Image Upload</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<select name="brand" id="brand">
<option value="">Show All Product</option>
<?php echo fill_brand($connect); ?>
</select>
<br /><br />
<!--Testing-->
<div class="table-responsive">
<table class="table table-striped table-bordered tbl">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Brand</th>
</tr>
</thead>
<tbody id="warehouse">
<?php fill_product($connect);?>
</tbody>
<tfoot>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Brand</th>
</tr>
</tfoot>
</table>
<!--Testing-->
</div>
</body>
</html>
<script>
$(document).ready( function () {
$('.tbl').DataTable();
} );
$(document).ready(function(){
$('#brand').change(function(){
var brand_id = $(this).val();
$.ajax({
url:"load_data.php",
method:"POST",
data:{brand_id:brand_id},
success:function(data){
$('#warehouse').html(data);
}
});
});
});
</script>
load_data.php
<?php
//load_data.php
$connect = mysqli_connect("localhost", "root", "", "ajaxtest");
$output = '';
if(isset($_POST["brand_id"]))
{
if($_POST["brand_id"] != '')
{
$sql = "SELECT * FROM product WHERE brand_id = '".$_POST["brand_id"]."'";
}
else
{
$sql = "SELECT * FROM product";
}
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<tr>';
$output .= '<td>'.$row["product_id"].'</td>';
$output .= '<td>'.$row["product_name"].'</td>';
$output .= '<td>'.$row["brand_id"].'</td>';
$output .='</tr>';
}
echo $output;
}
?>
Trying to make a select option to search data tables, but after that I realize the data tables pagination and entries cannot change according to the search (Using bootstrap), how should I do and what should I do so that it respond to my select option and respond to show entries on bootstraps data tables
