Фильтр начальной загрузки сетки
Я только начал изучать начальную загрузку и jquery, и я пытаюсь построить простую сетку данных. Ниже приведен простой html / jquery page index.php и php скрипт fetchwokers.php
Этот фрагмент кода работает нормально (загрузка данных, поиск, подкачка страниц), но я хочу расширить его с помощью дополнительной фильтрации. Есть две радио кнопки. Когда пользователь нажимает на них, данные в таблице должны быть перезагружены. Это означает, что если пользователь нажимает на кнопку радио Показать работников со статусом 1, то в сетке должны быть видны только работники со статусом 1.
Как передать этот запрос в файл PHP и перезагрузить таблицу?
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>Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …