Question

我刚刚开始研究引导程序和jquery，并且正在尝试构建简单的数据网格。下面是简单的html / jquery页面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>

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);

?>

过滤器引导网格

0 个答案: