I have just started with studying bootstrap and jquery and I'm trying to build simple data grid. Below is simple html/jquery page index.php and php script fetchwokers.php
This piece of code works fine (loading data, searching, paging), but I want to extend this by aditional filtering. There are two radio buttons. When user click on of them the data in table should be reloaded. It means if user click on radiobutton Show workers with status 1 then in grid should be visible only workers with status 1.
How to pass this request to PHP file and reload table?
index.php
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<?php
include("config2.php");
?>
<html>
<head>
<title>Workers</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:1270px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="container box">
<h1 align="center">List of Workers</h1>
<br />
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioWorkers1" name="defaultExampleRadios">
<label class="custom-control-label" for="radioWorkers1">Show workers with status 1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioWorkers2" name="defaultExampleRadios" checked>
<label class="custom-control-label" for="radioWorkers2">Show workers with status 2</label>
</div>
<div class="table-responsive">
<table id="workers_data" class="table table-bordered table-striped" data-filter-control="true" data-toggle="table" data-search="true" data-toolbar="#toolbar" data-show-columns="true">
<thead>
<tr>
<th data-column-id="ID" data-identifier="true" data-type="string" data-visible="true" data-visible-in-selection="false">ID</th>
<th data-column-id="Name">Name</th>
<th data-column-id="Status">Status</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
var workerTable = $('#workers_data').bootgrid({
ajax: true,
rowSelect: true,
post: function()
{
return{
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: "fetchworkers.php",
formatters: {
"commands": function(column, row)
{
}
}
});
</script>fetchworkers.php
$query = '';
$data = array();
$records_per_page = 10;
$start_from = 0;
$current_page_number = 0;
if(isset($_POST["rowCount"]))
{
$records_per_page = $_POST["rowCount"];
}
else
{
$records_per_page = 10;
}
if(isset($_POST["current"]))
{
$current_page_number = $_POST["current"];
}
else
{
$current_page_number = 1;
}
$start_from = ($current_page_number - 1) * $records_per_page;
$query .= "
SELECT ID, Name, Status FROM tblworkers ";
if(!empty($_POST["searchPhrase"]))
{
$query .= 'WHERE (Name LIKE "%'.$_POST["searchPhrase"].'%" ';
$query .= 'OR Status LIKE "%'.$_POST["searchPhrase"].'%" ) ';
}
$order_by = '';
if(isset($_POST["sort"]) && is_array($_POST["sort"]))
{
foreach($_POST["sort"] as $key => $value)
{
$order_by .= " $key $value, ";
}
}
else
{
$query .= 'ORDER BY ID DESC ';
}
if($order_by != '')
{
$query .= ' ORDER BY ' . substr($order_by, 0, -2);
}
if($records_per_page != -1)
{
$query .= " LIMIT " . $start_from . ", " . $records_per_page;
}
$result = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
}
$query1 = "SELECT * FROM tblworkers";
$result1 = mysqli_query($connection, $query1);
$total_records = mysqli_num_rows($result1);
$output = array(
'current' => intval($_POST["current"]),
'rowCount' => 10,
'total' => intval($total_records),
'rows' => $data
);
echo json_encode($output);
?>