如何在datatable的每一行中添加编辑/删除按钮
如何在datatable的每一行中添加编辑/删除按钮
提问于 2020-10-26 01:44:32
我创建了一个数据表，现在我需要编辑和删除表中的记录，所以我想在year列旁边添加delete和edit按钮。该列名应为操作。
动作列应该紧挨着年份列，并且应该包含删除编辑按钮。
index.html
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<title>index</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome-free-5.14.0-web\css\all.css">
</head>
<body>
<div class="adapt_area">
<div class="container">
<table id="newexample" class="table table-striped table-bordered table-light" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Year</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#newexample').dataTable({
"bProcessing": true,
"sAjaxSource": "fetchdata.php",
"aoColumns": [
{ mData: 'title' } ,
{ mData: 'name' },
{ mData: 'year_name' }
],
});
});
</script>
</html> fetchdata.php
<?php
require 'db_connection.php';
$query = "SELECT notes.title,subject.name,year.year_name from notes
INNER JOIN subject ON notes.subject=subject.id
INNER JOIN year ON subject.year=year.id";
$result = $conn->query($query);
$data=array();
while($row = $result->fetch_array(MYSQLI_ASSOC)){
$data[] = $row;
}
$results = ["sEcho" => 1,
"iTotalRecords" => count($data),
"iTotalDisplayRecords" => count($data),
"aaData" => $data ];
echo json_encode($results);
?>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-26 10:13:53
对于update和delete按钮，您需要一个ID，我假设数据库上的id将命名为id
$(document).ready(function() {
$('#newexample').dataTable({
"bProcessing": true,
"sAjaxSource": "fetchdata.php",
"aoColumns": [
{ mData: 'title' } ,
{ mData: 'name' },
{ mData: 'year_name' },
{
mData: '',
render: (data,type,row) => {
return `<a href='link_to_edit/${row.id}'>update</a>`;
}
}
],
});
});参考this
Stack Overflow用户
发布于 2020-10-26 01:55:07
您可以在文档中使用此示例：
$(document).ready(function() {
var table = $('#newexample').dataTable( {
"ajax": "fetchdata.php",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button id="edit">edit</button>"
} ]
} );
$('#newexample tbody').on( 'click', '#edit', function () {
//the job
} );
} );因此，要检索数据，您可以使用以下命令：
var data = table.row(this).data();而data是一个用来访问数据的数组：
data[0],data[1] ....页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64526856
复制相关文章
相似问题
腾讯云开发者
