以下是使用jQuery和AJAX实现增删改查及分页显示功能的示例代码：
HTML部分：
<div id="content">
<!-- 用于显示数据的表格 -->
<table id="data-table">
<!-- 表头 -->
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<!-- 表身，动态插入数据行 -->
<tbody>
<!-- 数据行将被插入此处 -->
</tbody>
</table>
<!-- 分页控件 -->
<div id="pagination"></div>
</div>
JavaScript部分 (jQuery + AJAX)：
$(document).ready(function() {
// 初始加载数据和分页
loadData(1);
// 分页点击事件
$('#pagination').on('click', 'a', function(e) {
e.preventDefault();
loadData($(this).data('page'));
});
// 添加数据
$('#add-form').on('submit', function(e) {
e.preventDefault();
addData($(this).serialize());
});
// 删除数据
$('#data-table').on('click', '.delete', function() {
deleteData($(this).data('id'));
});
// 更新数据
$('#data-table').on('click', '.edit', function() {
editData($(this).data('id'));
});
// 提交更新后的数据
$('#update-form').on('submit', function(e) {
e.preventDefault();
updateData($(this).serialize());
});
});
// 加载数据和分页信息
function loadData(page) {
$.ajax({
url: 'get-data.php',
type: 'GET',
data: { page: page },
success: function(response) {
var data = JSON.parse(response);
// 更新表格内容
$('#data-table tbody').html(data.table);
// 更新分页控件
$('#pagination').html(data.pagination);
}
});
}
// 添加数据
function addData(data) {
$.ajax({
url: 'add-data.php',
type: 'POST',
data: data,
success: function(response) {
loadData(1); // 重新加载第一页数据
}
});
}
// 删除数据
function deleteData(id) {
$.ajax({
url: 'delete-data.php',
type: 'POST',
data: { id: id },
success: function() {
loadData($('#pagination .active a').data('page'));
}
});
}
// 编辑数据
function editData(id) {
// 弹出编辑框或者跳转到编辑页面
// ...
}
// 更新数据
function updateData(data) {
$.ajax({
url: 'update-data.php',
type: 'POST',
data: data,
success: function() {
loadData($('#pagination .active a').data('page'));
}
});
}
PHP部分 (处理AJAX请求)：
// get-data.php
$page = $_GET['page'];
// 构造数据源，查询数据库并分页
// ...
$data = array(
'table' => '<tr>...</tr>', // 生成的表格行
'pagination' => '<a href="#">...</a>' // 生成的分页链接
);
echo json_encode($data);
// add-data.php
$name = $_POST['name'];
$age = $_P