以下是一个使用
dataTables 实现增删改查并与后端交互的示例代码：
HTML：
```html
<!DOCTYPE html>
<html>
<head>
<title>
DataTables Example</title>
<link rel="
stylesheet" type="text/css" href="https://cdn.
datatables.net/1.10.24/css/jquery.
dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.
datatables.net/1.10.24/js/jquery.
dataTables.min.js"></script>
</head>
<body>
<h1>
DataTables Example</h1>
<table id="example" class="display"
style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<
button id="add
Button">Add</
button>
</body>
<script type="text/javascript">
var dataTable;
$(document).ready(function() {
dataTable = $('#example').DataTable({
"ajax": "backend.php?action=get",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "age" },
{ "data": "gender" },
{ "defaultContent": "<
button>Edit</
button><
button>Delete</
button>" }
]
});
$('#add
Button').click(function() {
addData();
});
$('#example tbody').on('click', '
button', function() {
var data = dataTable.row($(this).parents('tr')).data();
if ($(this).text() == "Edit") {
editData(data);
} else {
deleteData(data);
}
});
});
function addData() {
var name = prompt("Name:");
var age = prompt("Age:");
var gender = prompt("Gender:");
$.ajax({
url: "backend.php",
type: "POST",
data: { action: "add", name: name, age: age, gender: gender },
success: function(result) {
dataTable.ajax.reload(null, false);
}
});
}
function editData(data) {
var name = prompt("Name:", data.name);
var age = prompt("Age:", data.age);
var gender = prompt("Gender:", data.gender);
$.ajax({
url: "backend.php",
type: "POST",
data: { action: "edit", id: data.id, name: name, age: age, gender: gender },
success: function(result) {
dataTable.ajax.reload(null, false);
}
});
}
function deleteData(data) {
if (confirm("Are you sure to delete?")) {
$.ajax({
url: "backend.php",
type: "POST",
data: { action: "delete", id: data.id },
success: function(result) {
dataTable.ajax.reload(null, false);
}
});
}
}
</script>
</html>
```
backend.php：
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$action = $_POST["action"];
if ($action == "add") {
$name = $_POST["name"];
$age = $_POST["age"];
$gender = $_POST["gender"];
$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('" . $name . "', '" . $age . "', '" . $gender . "')";
$conn->query($sql);
} else if ($action == "edit") {
$id = $_POST["id"];
$name = $_POST["name"];
$age = $_POST["age"];
$gender = $_POST["gender"];
$sql = "UPDATE MyGuests SET firstname='" . $name . "', lastname='" . $age . "', email='" . $gender . "' WHERE id=" . $id;
$conn->query($sql);
} else if ($action == "delete") {
$id = $_POST["id"];
$sql = "DELETE FROM MyGuests WHERE id=" . $id;
$conn->query($sql);
} else if ($action == "get") {
$sql = "SELECT * FROM MyGuests";
$result = $conn->query($sql);
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode(array("data" => $data));
}
$conn->close();
?>
```
注意：上面的代码仅供参考，需要根据具体情况进行修改。同时，需要在后端进行安全验证和防止 SQL 注入等操作。
由于内容为空，暂无法提供包含关键信息的摘要。
扫一扫
47
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
