javascript - 表单未更新动态 html 表的行数
问题描述
我有一个仪表板 php 页面,其中包含来自 mysql 数据库的动态记录表,每个页面分页为 1000 个。我添加了一个选择下拉菜单,其中包含一些选项供用户更新显示的行数。选择有 JavaScript 代码来自动提交表单 onchange。
表格页面:
<?php
include('connect.php');
// first check URL
if (isset($_GET['amount'])) {
$perpage = $_GET['amount'];
}
// Now check form
if (isset($_POST['amount'])) {
$perpage = $_POST['amount'];
}
// if nothing set, default:
if(!isset($perpage)) {
$perpage = 50;
}
if(isset($_GET['page']) && !empty($_GET['page'])){ // code to get the amount of records for HTML paginated pages
$currentPage = $_GET['page'];
} else {
$currentPage = 1;
}
// Pagination code and query
$startFrom = ($currentPage * $perpage) - $perpage;
$totalEmpSQL = "SELECT * FROM `tblusers` WHERE Id NOT IN (1,2,3)";
$allEmpResult = mysqli_query($conn, $totalEmpSQL);
$totalEmployee = mysqli_num_rows($allEmpResult);
$lastPage = ceil($totalEmployee/$perpage);
$firstPage = 1;
$nextPage = $currentPage + 1;
$previousPage = $currentPage - 1;
$empSQL = "SELECT Id, FirstName, LastName, Cell, Email, Address, Region
FROM `tblusers`
WHERE Id NOT IN (1,2,3)
ORDER BY LastName
LIMIT $startFrom, $perpage";
$empResult = mysqli_query($conn, $empSQL);
?>
<!-- HTML Form -->
<section class="panel">
<header class="panel-heading">
<div class="input-group">
<!-- JavaScript Filter Input -->
<input type="text" class="form-control" id="search" onkeyup="myFunction()"
placeholder="Soek lede..">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</header>
<div class="panel-body">
<div class="row datatables-header form-inline">
<div class="col-sm-4 col-md-4">
<!-- THE FORM THAT IS SUPPOSED TO UPDATE THE
VARIABLE FOR AMOUNT QUERY -->
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<select id="amount" class="form-control"
onchange="this.form.submit()">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</form>
</div>
<div class="col-sm-4 col-md-4">
<nav aria-label="Page navigation">
<ul class="pagination">
<?php if($currentPage != $firstPage) { ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo
$firstPage ?>" tabindex="-1" aria-label="Vorige">
<span aria-hidden="true">Eerste</span>
</a>
</li>
<?php } ?>
<?php if($currentPage >= 2) { ?>
<li class="page-item"><a class="page-link" href="?
page=<?php echo $previousPage ?>"><?php echo $previousPage ?></a></li>
<?php } ?>
<li class="page-item active"><a class="page-link"
href="?page=<?php echo $currentPage ?>"><?php echo $currentPage ?></a>
</li>
<?php if($currentPage != $lastPage) { ?>
<li class="page-item"><a class="page-link" href="?page=<?= $nextPage ?>&amount=<?= $perpage ?>"><?= $nextPage ?></a></li>
<li class="page-item">
<a class="page-link" href="?page=<?php echo
$lastPage ?>" aria-label="Volgende">
<span aria-hidden="true">Laaste</span>
</a>
</li>
<?php } ?>
</ul>
</nav>
</div>
<div class="col-sm-4 col-md-4">
<a class="btn btn-primary pull-right" style="margin:20px;"
href="index.php?page=new">Laai nuwe lid</a>
</div>
</div>
<!-- THE DYNAMIC TABLE -->
<div class="table-responsive">
<table id="myTable" class="table table-hover table-striped
table-condensed mb-none">
<?php
echo "<thead><th>Van:</th><th>Naam:</th><th>Selfoon:
</th><th>E-pos:</th><th>Adres:</th><th>Streek:</th><th>Aksie:</th>
</thead>
<tbody>";
while($emp = mysqli_fetch_assoc($empResult)){
?>
<tr>
<?php echo "<tr><td>". $emp["LastName"] . "
</td><td>". $emp["FirstName"] . "</td><td>". $emp["Cell"] . "</td><td>".
$emp["Email"] . "</td><td>". $emp["Address"] . "</td><td>". $emp["Region"]
.
"</td><td class='actions'><a href='index.php?page=edit&id=" . $emp["Id"] .
"'><i class='fa fa-pencil'> Wysig | </i></a><a href='index.php?
page=delete&id=" . $emp["Id"] . "'<i class='delete-row'><i class='fa fa-
trash-o'> Verwyder | </i></a><a href='index.php?page=single&id=" .
$emp["Id"]
. "'<i class='delete-row'><i class='fa fa-comment-o'> SMS</i></a></td>
</tr>";?>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</section>
<!-- dash panel end -->
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
该页面应以表的默认每页 1000 行的数量加载,然后在选择更改为 100 时更新,仅加载 100 条记录。它目前根本不显示任何记录,但是当我删除选择时,它会加载默认值。我的猜测是,我处理金额的代码不正确?
解决方案
尝试像这样分配为默认值:
$perpage = isset($_GET['amount']) ? $_GET['amount'] : 1000;
目前,您首先根据GET
值设置它,然后在下一行覆盖它。这种方式检查它是否在 URL 中,如果没有,则使用您的默认值。
然后将该数量添加到您的分页链接中。例如,更改:
<li class="page-item"><a class="page-link" href="?
page=<?php echo $nextPage ?>"><?php echo $nextPage ?></a></li>
到
<li class="page-item"><a class="page-link" href="?
page=<?= $nextPage ?>&amount=<?= $perpage ?>"><?= $nextPage ?></a></li>
此外,您的表单是POST
,但选择没有名称,因此没有发布任何值。另外,您检查$_GET
. 所以我们需要先调整选择:
<select id="amount" name="amount" class="form-control"
onchange="this.form.submit()">
但是,这现在意味着您需要检查 POST 以获取分页链接的 select 和 GET。所以我们现在需要检查哪些:
// first check URL
if (isset($_GET['amount'])) {
$perpage = $_GET['amount'];
}
// Now check form
if (isset($_POST['amount'])) {
$perpage = $_POST['amount'];
}
// if nothing set, default:
if(!isset($perpage)) {
$perpage = 1000;
}
推荐阅读
- c# - 从 C# Web API 读取数据而不是响应
- javascript - React JS 中的谷歌标签管理器
- python - Python scikitlearn 中支持向量机模型分数的可变性/随机性
- swift - 提取枚举关联类型的实例
- xamarin - 是collectionview而不是listview的新方法吗?
- android - Firestore 未检索完整的数据值
- php - Magento 2.4.1 在产品列表页面上显示横幅
- autocomplete - inputProps={{ readOnly: true }} 不适用于 Material UI 自动完成
- javascript - 如何在反应中执行节点js文件
- python - 仅从 PySpark GroupBy / OrderBy 检索 X 记录而不进行聚合