Bonjour, j'aimerais avoir votre aide. J'ai créé une interface (dans datatables ) sur laquelle y a une colonne menu qui contient trois boutons(éditer, supprimer et visualiser). J'ai fait une page modale pour le bouton éditer mais ça ne s'affiche pas. Je travaille avec php et Xampp. Voici le script pour l'interface:
<?php
include('cn.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<!--css bootstrap js-->
<!--font awsome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<!--fin font awsome-->
<title>Document</title>
<!--data tables-->
<!---->
<!---->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<!--bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<div class="row">
<?php
$query="select * from etudiant";
$pdostm=$cn->prepare($query);
$pdostm->execute();
//var_dump($pdostm->fetchAll(PDO::FETCH_ASSOC));
?>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Photo</th>
<th>Nom</th>
<th>Prenom</th>
<th>Datenaiss</th>
<th>Sexe</th>
<th>Filiere</th>
<th>Section</th>
<th>Menu</th>
</tr>
</thead>
<tbody>
<?php while ($ligne=$pdostm->fetch(PDO::FETCH_ASSOC)):?>
<tr>
<td><?php echo $ligne['ide'];?></td>
<td><img width="40" height="30" src="images/<?php echo $ligne['photo'];?>">
<td><?php echo $ligne['nom'];?></td>
<td><?php echo $ligne['prenom'];?></td>
<td><?php echo $ligne['datenaiss'];?></td>
<td><?php echo $ligne['sexe'];?></td>
<td><?php echo $ligne['filiere'];?></td>
<td><?php echo $ligne['section'];?></td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modifier">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
</button>
<a href="" class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
</svg>
</a>
<a href="" class="btn btn-info">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
</a>
</td>
</tr>
<!--Modal modification-->
<div class="modal fade" id="modifier" tabindex="-1" aria-hideen='true' aria-lebelledby='modification' role='dialog'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<i class="glyphicon glyphicon-pencil"></i> Modifier
</div>
<div class="modal-body">
<form class="form-horizontal" action="#" method="POST">
<input type="hidden" name="c" value="">
<input type="hidden" name="id" value="">
<div class="form-group">
<div class="col-md-3">
<label form="nom" class="control-label pull-right">Nom:</label>
</div>
<div class="col-md-7">
<input type="text" name="nom" class="form-control" placeholder="" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label form="prenom" class="control-label pull-right">Preom:</label>
</div>
<div class="col-md-7">
<input type="text" name="prenom" class="form-control" placeholder="" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label form="filiere" class="control-label pull-right">Filiere:</label>
</div>
<div class="col-md-7">
<input type="text" name="filiere" class="form-control" placeholder="" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label form="section" class="control-label pull-right">Section:</label>
</div>
<div class="col-md-7">
<input type="text" name="section" class="form-control" placeholder="" value="">
</div>
</div>
<button class="btn btn-primary btn-block" type="submit"><i class="glyphicon glyphicon-save"></i> Valider
</button>
</form>
</div>
</div>
</div>
</div>
<!--Fin modal modif-->
<?php endwhile; ?>
</tbody>
</table>
<!--jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- data table-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<!--bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
Voici un autre script:
let dataTable;
let dataTableIsInitialized = false;
let dataTableOptions = {
dom: 'Bfrtilp',
buttons: [
{
extend: 'excelHtml5',
text: "<i class='fa-solid fa-file-csv'></i>",
titleAttr: 'exporter en Excel',
className: 'btn btn-success',
},
{
extend: 'pdfHtml5',
text: "<i class='fa-solid fa-file-pdf'></i>",
titleAttr: 'exporter en pdf',
className: 'btn btn-danger',
},
{
extend: 'print',
text: "<i class='fa-solid fa-print'></i>",
titleAttr: 'imprimer ',
className: 'btn btn-info',
},
],
lengthMenu: [3, 6, 9, 12],
columnDefs: [
{ orderable: false, target: [1,2,3,4,5]},
{ searchable: false, target: [0,1,2,4,5]},
{width: '10%', target: [0, 1]},
],
pageLength: 5,
destroy: true,
};
const initDataTable = async ()=>{
if (dataTableIsInitialized) {
console.log('vamos s destruir la tabla');
dataTable.destroy();
}
await listUsers();
dataTable = $('#example').DataTable(dataTableOptions);
dataTableIsInitialized = true;
};
const listUsers = async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users")
const users = await response.json();
let content = '';
console.log(users);
users.forEach(user, index => {
/*content += `
<tr>
<td> ${index + 1} </td>
<td> ${user.name} </td>
<td> ${user.email}</td>
<td>${user.name}</td>
<td>${user.adress.city}</td>
<td>${user.company.name}</td>
<td><i class="fa-solid fa-circle-check"></i></td>
<td>
<button class="btn btn-sm btn-primary"><i class="fa-solid fa-pencil"></i>
</button>
<button class="btn btn-sm btn-primary"><i class="fa-solid fa-trash-can"></i>
</button>
</td>
</tr>`
});*/
table_users.inneHTML = content;
} catch (error) {
console.log(error);
}
};
window.addEventListener('load',async () => {
await initDataTable();
});
Afficher la suite
