datatables button style

由于内容为空,暂无法提供包含关键信息的摘要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以下是一个使用 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 注入等操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Farmwang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值