how to add edit/delete buttons in each row of datatable
Question
I create a datatable, now I need to edit and delete the records in the table so I want to add delete and edit button next to year column. that column name should be as action.
Action column should be next to the year column and that should contain delete edit buttons.
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 answers
solution1
1 ACCPTED 2020-10-26 02:13:52
well for update and delete button, you need an ID, i assumed the id on database will named as 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>`;
}
}
],
});
});
reference this
solution2
0 2020-10-25 17:55:07
you can use this example in the documentation:
$(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
} );
} );
so to retrieve data you can use this:
var data = table.row(this).data();
and data is an array to access data use:
data[0],data[1] ....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.