📅 最后修改于: 2023-12-03 15:03:45.041000 🧑 作者: Mango
在Web开发中，分页是非常常见的需求。而在需要处理大量数据时，搜索和过滤也是很重要的功能。本文将介绍如何使用PHP创建带有搜索和过滤功能的Ajax分页。
要使用本文介绍的功能，需要先进行一些准备工作。首先，我们需要建立一个MySQL数据库，并在其中创建一个名为“items”的数据表。数据表“items”中，我们需要包含以下字段：
接下来，我们需要在PHP文件中连接数据库并查询数据：
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', '', 'testdb');
// 查询数据
$query = "SELECT * FROM items";
$result = mysqli_query($conn, $query);
// 遍历数据
while ($row = mysqli_fetch_assoc($result)) {
echo $row['id'] . ' ' . $row['name'] . ' ' . $row['price'] . ' ' . $row['qty'] . '<br>';
}
// 关闭连接
mysqli_close($conn);
?>
这段代码将查询数据表“items”中的所有记录，并将其输出到浏览器中。完成上述操作后，我们可以开始实现分页、搜索和过滤功能。
为了实现分页功能，我们需要创建一个包含以下元素的HTML页面：
以下是一个示例页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax分页</title>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 默认第一页
var page = 1;
// 默认每页显示10条记录
var per_page = 10;
// 默认没有搜索条件
var keyword = '';
// 默认没有过滤条件
var filter = '';
function refreshData() {
// 发送Ajax请求
$.ajax({
type: 'POST',
url: 'get_data.php',
dataType: 'html',
data: {page: page, per_page: per_page, keyword: keyword, filter: filter},
success: function (data) {
// 更新表格和分页条
$('#table_data').html(data);
}
});
}
// 下拉列表改变事件
$('#per_page_select').change(function () {
// 改变每页显示的记录数
per_page = $('#per_page_select').val();
// 刷新数据
refreshData();
});
// 搜索按钮点击事件
$('#search_button').click(function () {
// 获取搜索关键字
keyword = $('#search_keyword').val();
// 刷新数据
refreshData();
});
// 过滤按钮点击事件
$('#filter_button').click(function () {
// 获取过滤条件
filter = $('#filter_option').val();
// 刷新数据
refreshData();
});
// 分页按钮点击事件
$('#pagination').on('click', 'a', function (e) {
e.preventDefault();
// 改变当前页码
page = $(this).attr('data-page');
// 刷新数据
refreshData();
});
// 初始化页面，显示第一页数据
refreshData();
});
</script>
</head>
<body>
<div>
<select id="per_page_select">
<option value="10" selected>每页10条</option>
<option value="20">每页20条</option>
<option value="30">每页30条</option>
</select>
</div>
<div>
<input type="text" id="search_keyword" placeholder="请输入关键字">
<button id="search_button">搜索</button>
</div>
<div>
<select id="filter_option">
<option value="" selected>全部</option>
<option value="price > 100">价格大于100元</option>
<option value="qty < 10">库存小于10件</option>
</select>
<button id="filter_button">过滤</button>
</div>
<div id="table_data"></div>
<div id="pagination"></div>
</body>
</html>
以上代码中包含以下元素：
分页条将通过Ajax请求动态生成。下一步，我们需要创建用于处理Ajax请求的PHP文件。
以下是用于处理Ajax请求的PHP文件（get_data.php）：
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', '', 'testdb');
// 获取当前页码和每页显示的记录数
$page = $_POST['page'] ?? 1;
$per_page = $_POST['per_page'] ?? 10;
// 获取搜索关键字和过滤条件
$keyword = $_POST['keyword'] ?? '';
$filter = $_POST['filter'] ?? '';
// 计算总记录数和总页数
$count_query = "SELECT COUNT(*) FROM items WHERE name LIKE '%$keyword%' AND $filter";
$total_count_result = mysqli_query($conn, $count_query);
$total_count = mysqli_fetch_row($total_count_result)[0];
$total_page = ceil($total_count / $per_page);
// 计算偏移量
$offset = ($page - 1) * $per_page;
// 查询数据
$query = "SELECT * FROM items WHERE name LIKE '%$keyword%' AND $filter LIMIT $per_page OFFSET $offset";
$result = mysqli_query($conn, $query);
// 输出表格
echo '<table>';
echo '<tr><th>ID</th><th>名称</th><th>价格</th><th>库存量</th></tr>';
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr><td>' . $row['id'] . '</td><td>' . $row['name'] . '</td><td>' . $row['price'] . '</td><td>' . $row['qty'] . '</td></tr>';
}
echo '</table>';
// 输出分页条
echo '<div>';
if ($page > 1) {
echo '<a href="#" data-page="' . ($page - 1) . '">上一页</a> ';
}
for ($i = 1; $i <= $total_page; $i++) {
if ($i == $page) {
echo '<strong>' . $i . '</strong> ';
} else {
echo '<a href="#" data-page="' . $i . '">' . $i . '</a> ';
}
}
if ($page < $total_page) {
echo '<a href="#" data-page="' . ($page + 1) . '">下一页</a> ';
}
echo '</div>';
// 关闭连接
mysqli_close($conn);
?>
以下是本文件的主要功能：
注意，为避免SQL注入攻击，应该在SQL语句中使用参数化查询，而不是直接将查询条件拼接到SQL语句中。
完成以上步骤后，我们就成功地创建了一个带有搜索和过滤功能的Ajax分页应用。
本文介绍了如何使用PHP创建带有搜索和过滤功能的Ajax分页。通过学习本文，您可以了解如何使用HTML、JavaScript和PHP来实现分页、搜索和过滤功能。同时，您还可以了解如何防止SQL注入攻击，以在开发过程中保障数据安全。