I have a PHP program with a datatable, which works fine. Each row has a button (“Manage”) for CRUD actions which, when clicked, opens up a Bootstrap 4 modal :
I changed the program to Datatables-Server-Side because the DB table has thousands of rows. This too works fine, but I cannot add the “Mange” button to the datatable rows.
My HTML :
<html>
<head>
<title>TEST (DataTables)</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mr-n2 ml-n2 mb-n2 rounded bg-secondary">
<div class="container">
<div class="row">
<div class="col-lg-12 col-lg-offset-2 myMargTop20 bg-white rounded">
<table id="example" class="display table table-bordered table-hover dt-responsive nowrap rounded bg-info" cellspacing="0" width="100%">
<br>
<thead>
<tr>
<th>Id</th>
<th>Full Name</th>
<th>User</th>
<th>Phone</th>
<th>Create Date</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable({
'scrollX': true,
'pagingType': 'numbers',
'processing': true,
'serverSide': true,
'ajax': 'datatablesServerSide.php'
});
});
</script>
</body>
</html>
My datatablesServerSide.php :
<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
array("db" => "usrId", "dt" => 0),
array("db" => "usrFullName", "dt" => 1),
array("db" => "usrName", "dt" => 2),
array("db" => "usrPhone", "dt" => 3),
array("db" => "usrCreateDate","dt" => 4, "formatter" => function($d, $row) {return date("d-m-Y", strtotime($d));})
);
$sql_details = array(
"user" => "root",
"pass" => "",
"db" => "a_my_project",
"host" => "localhost"
);
require( "ssp_with_UTF8.class.php" );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
I would appreciate any hint to start me going. I read numerous entries here and elsewhere but none helped...
Thank you!