$(document).ready(function () { $('#dataTables-example').dataTable(); });这些代码什么意思?
时间: 2024-02-06 15:03:11 浏览: 34
这是jQuery的一个函数,用于在页面加载完成后初始化一个名为"dataTables-example"的表格,并将其转换为DataTables。DataTables是一个强大的jQuery插件,它可以将HTML表格转换为功能丰富的交互式表格,包括搜索、排序、分页等功能。这段代码的作用是使"dataTables-example"表格具有DataTables的功能。
相关问题
dataTables .fnDraw()失效
在新版本的 DataTables 中,`.fnDraw()` 方法被废弃了,推荐使用 `.draw()` 方法来刷新表格。如果你使用的是旧版本的 DataTables,可以尝试使用 `.fnDraw(false)` 来刷新表格,但这个方法已经不被支持了。
如果你发现使用 `.draw()` 方法刷新表格时失效了,可能是因为你使用了 DataTables 的服务器端处理模式(server-side processing)。在服务器端处理模式下,你需要通过 AJAX 请求从服务器获取数据,而不是使用 `.fnDraw()` 或 `.draw()` 方法刷新数据。
以下是一个基本的服务器端处理模式示例:
```javascript
$(document).ready(function() {
$('#example').DataTable( {
"processing": true, // 显示加载状态
"serverSide": true, // 开启服务器处理模式
"ajax": "scripts/server_processing.php", // 数据源 URL
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
```
在服务器端处理模式下,`ajax` 选项指定了数据源的URL,这个 URL 必须返回 JSON 格式的数据。`columns` 选项定义了表格的列,每一列的 `data` 属性对应了 JSON 数据中的字段名。
服务器端处理模式下,jQuery DataTables 还会将额外的参数发送到服务器。这些参数包括:
- `draw`:当前 DataTable 的次数
- `start`:当前页的起始行
- `length`:当前页的长度
- `search[value]`:搜索关键字
- `order[0][column]`:排序列的索引
- `order[0][dir]`:排序的方向
在服务器端处理模式下,后端需要根据这些参数来查询数据库并返回相应的数据。通常情况下,我们可以使用后端语言(如 PHP、Java、Python 等)来编写服务器端处理的代码。
dataTables实现增删改查的完整代码与后端交互
以下是一个使用 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="addButton">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>" }
]
});
$('#addButton').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 注入等操作。