Sujet Précédent Sujet Suivant

Problème d'affichage d'une page modale dans datables

aichatou - 26 sept. 2023 à 13:56
jordane45 Messages postés 38166 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 mai 2024 - 26 sept. 2023 à 17:21

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">&times;</button>
                                                <i class="glyphicon glyphicon-pencil"></i>&nbsp;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>&nbsp;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();

});

A voir également:

Problème d'affichage d'une page modale dans datables
Supprimer une page word - Guide
Traduire une page web - Guide
Créer une page facebook - Guide
Page d'accueil iphone - Guide
Word numéro de page 1/2 - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38166 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 mai 2024 4 658
26 sept. 2023 à 17:21

Bonjour

Datatable, et les "modales" étant du JS .. je déplace donc ta question dans le forum javascript.

Au passage, pourrais tu afficher la console de ton navigateur et regarder, lorsque tu affiches ta page et/ou après avoir cliqué sur ton "bouton" de menu, voir si il n'y aurait pas des infos / erreurs indiquées ?? ( n'hésites pas non plus à nous en mettre une capture écran... )

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

Leboncoin : j'ai un problème d'affichage

[référencement] Ne pas être référencé

Probleme d'affichage google chrome

Problème d'affichage d'une page modale dans datables

1 réponse

Votre réponse

Discussions similaires

Newsletters