I done a server-sided datatable with an edit button. How can i get the specific id when i clicked on the button ? Currently I wanted to do like this window.location.href = "updateProject.php?id=<?php echo $row["projectID"];?>"; But there is no ways for me to access the projectID.
My project table
table
My datatable
datatable
<!-- PAGE -->
<div class="page">
<div class="page-main">
<?php include '../includes/importGlobal/header.php'; ?>
<?php include '../includes/importGlobal/sidebar.php'; ?>
<!--app-content open-->
<div class="main-content app-content mt-0">
<div class="side-app">
<!-- CONTAINER -->
<div class="main-container container-fluid">
<!-- PAGE-HEADER -->
<div class="page-header">
<div class="page-title"></div>
<div>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Manage</a></li>
<li class="breadcrumb-item active" aria-current="page">Project management</li>
</ol>
</div>
</div>
<!-- PAGE-HEADER END -->
<!-- Row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Projects</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<div id="basic-datatable_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered text-nowrap border-bottom dataTable no-footer" id="basic-datatable1" role="grid" aria-describedby="basic-datatable_info">
<thead>
<tr role="row">
<th class="wd-15p border-bottom-0 sorting sorting_asc" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First name: activate to sort column descending" style="width: 193.5px;">Project Name</th>
<th class="wd-15p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Last name: activate to sort column ascending" style="width: 181.55px;">Description</th>
<th class="wd-20p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 335.475px;">Location</th>
<th class="wd-15p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 188.387px;">Status</th>
<th class="wd-10p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 145.925px;">Start Date</th>
<th class="wd-10p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 145.925px;">End Date</th>
<th class="wd-10p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 145.925px;">Created By</th>
<th class="wd-10p border-bottom-0 sorting" tabindex="0" aria-controls="basic-datatable1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 145.925px;">Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Row -->
</div>
<!-- CONTAINER CLOSED -->
</div>
</div>
<!--app-content closed-->
</div>
</div>
SCRIPT
<script>
$(document).ready(function() {
$('#basic-datatable1').DataTable({
"processing": true,
"serverSide": true,
"ajax": "../includes/actions/listProject-logic.php",
"ordering": true,
"columnDefs": [{
"render": createManageBtn,
"data": null,
"targets": [7]
}]
});
});
</script>
<script type="text/javascript">
function createManageBtn() {
return '<div class = "btn-list"><button type = "button"class = "btn btn-primary btn-sm mb-1" onclick="editRedirect()" > Edit </button> <button type = "button"class = "btn btn-primary btn-sm mb-1" onclick="deleteRedirect()"> Delete </button> </div >';
}
function editRedirect() {
window.location.href = "redirect to updatePhp with specific id";
}
</script>
listProject-logic.php
<?php
// Database connection info
$dbDetails = array(
'host' => 'xxx',
'user' => 'xxx',
'pass' => 'xxx',
'db' => 'xxx'
);
// DB table to use
$table = 'projects';
// Table's primary key
$primaryKey = 'projectID';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database.
// The `dt` parameter represents the DataTables column identifier.
$columns = array(
array('db' => 'projectName', 'dt' => 0),
array('db' => 'projectDescription', 'dt' => 1),
array('db' => 'destinationName', 'dt' => 2),
array('db' => 'projectStatus', 'dt' => 3),
array('db' => 'startDate', 'dt' => 4),
array('db' => 'endDate', 'dt' => 5),
array('db' => 'uid', 'dt' => 6)
);
// Include SQL query processing class
require 'ssp.class.php';
// Output data as json format
echo json_encode(
SSP::simple($_GET, $dbDetails, $table, $primaryKey, $columns)
);