我有一个网站，其中显示了一个表格，其中包含来自数据库的数据，我正在尝试实现搜索功能，但无法使其正常工作。搜索功能的代码大部分是从我看过的教程中复制的，因为我对编码还很陌生。我曾尝试寻找拼写错误，缺少括号等，但无法正常工作。所以我希望有人可以告诉我我做错了什么：）
index.php：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8">
<meta name="description" content="Inventar">
<meta name="author" content="Martin Eide Bjørndal">
<title>Ut</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/src/css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<button class="back" onclick="window.location='../'">
<img src="/src/icons/back.png">
</button> <!-- Tilbake knapp -->
<div class="container-fluid" id="utskjekkcontainer">
<div class="row justify-content-center">
<div class="col-mv-10 bg-light mt-5 rounded p-3">
<h1 class="text-primary p-2">Utskjekk</h1>
<hr>
<div class="form-inline">
<label for="search" class="font-weight-bold lead text-dark">Søk</label>
<input type="text" name="search" id="search_text" class="form-control form-control-lg rounded-0 border-primary" placeholder="Søk...">
</div>
<hr>
<?php
include "../src/fn/init.php";
$stmt=$conn->prepare("SELECT * FROM inventar");
$stmt->execute();
$result=$stmt->get_result();
?>
<table class="table table-hover table-light table-striped" id="table_data">
<thead>
<tr>
<th>#</th>
<th>Navn</th>
<th>Antall</th>
<th>Tilgjengelig</th>
<th>Plassering</th>
<th>Vekt (kg)</th>
<th>Størrelse x y z (cm)</th>
<th>Kommentar</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch_assoc()){ ?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["navn"]; ?></td>
<td><?php echo $row["antall"]; ?></td>
<td><?php echo $row["antall_tilgjengelig"]; ?></td>
<td><?php echo $row["plassering"]; ?></td>
<td><?php echo $row["vekt"]; ?></td>
<td><?php echo $row["størrelse"]; ?></td>
<td><?php echo $row["kommentar"]; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#search_text').keyup(function(){
var search = $(this).val();
$.ajax({
url:'action.php',
method:'post',
data:{query:search},
success:function(response){
$('#table_data').html(response);
}
});
});
});
</script>
</body>
</html>
action.php：
<?php
include "../src/fn/init.php";
$output = "";
if(isset($_POST["query"])){
$search = $_POST["query"];
$stmt = $conn->prepare("SELECT * FROM inventar WHERE navn LIKE CONCAT('%','?','%') OR id LIKE CONCAT('%','?','%') OR plassering LIKE CONCAT('%','?','%')");
$stmt->bind_param("sss",$search, $search, $search);
} else {
$stmt=$conn->prepare("SELECT * FROM inventar");
};
$stmt->execute();
$result=$stmt->get_result();
if($result->num_rows>0){
$output = "<thead>
<tr>
<th>#</th>
<th>Navn</th>
<th>Antall</th>
<th>Tilgjengelig</th>
<th>Plassering</th>
<th>Vekt (kg)</th>
<th>Størrelse x y z (cm)</th>
<th>Kommentar</th>
</tr>
</thead>
<tbody>";
while($row=$result->fetch_assoc()){
$output .= "
<tr>
<td>".$row["id"]."</td>
<td>".$row["navn"]."</td>
<td>".$row["antall"]."</td>
<td>".$row["antall_tilgjengelig"]."</td>
<td>".$row["plassering"]."</td>
<td>".$row["vekt"]."</td>
<td>".$row["størrelse"]."</td>
<td>".$row["kommentar"]."</td>
</tr>";
};
$output .= "</tbody>";
echo $output;
} else {
echo "<h3> Found no match!</h3>";
};
?>
我在处理大量数据时遇到了同样的问题，偶然发现JQuery Datatables
它具有内置的搜索功能，允许排序和其他很酷的东西:)
您可以使用JQuery表
并像这样声明脚本以与您的表格连接
`<script>
$(document).ready(function(){
$('#table_data').DataTable();
});
</script>`有关详细信息，您可以阅读本文档https://datatables.net/