Salut,
Je rencontre un petit soucis lors de l'implémentation de substituts aux fenêtre de confirmation js (confirm) à l'intérieur d'un datatables présentant des détails de ligne.
D'abord je tiens à signaler qu'avec une initialisation de datatables basique, les dialogues fonctionnent très bien.
Donc, voilà le tuto que j'ai suivi pour mettre en place les dialogues perso ==> http://tutorialzine.com/2015/09/freebie-3-stylish-customizable-javascript-dialogs/
J'ai donc une page confirm.js, que j'inclu dans mon header.php (lui-même inclus sur toutes les pages) qui contient ce code :
$(document).ready(function() {
// We have two control functions that show or hide dialogs
function showDialog(id){
// Find the dialog and show it
var dialog = $('#' + id),
card = dialog.find('.dialog-card');
dialog.fadeIn();
// Center it on screen
card.css({
'margin-top' : -card.outerHeight()/2
});
}
function hideAllDialogs(){
// Hide all visible dialogs
$('.dialog-overlay').fadeOut();
}
// Here is how to use these functions
$('.dialog-confirm-button, .dialog-reject-button').on('click', function () {
// Hide the dialog when the confirm button is pressed
hideAllDialogs();
});
$('.dialog-overlay').on('click', function (e) {
if(e.target == this){
// If the overlay was clicked/touched directly, hide the dialog
hideAllDialogs();
}
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
// When escape is pressed, hide all dialogs
hideAllDialogs();
}
});
// Here, we are listening for clicks on the "show dialog" buttons,
// and showing the correct dialog
$('.dialog-show-button').on('click', function () {
// Take the contents of the "data-show-dialog" attribute
var toShow = $(this).data('show-dialog');
showDialog(toShow);
});
});
Ensuite je déclare mon datatables :
/* DATATABLES DEVIS PREDEFINIS */
function format ( d ) {
return '<div id="cont_details'+d.id+'" class="container_details"></div>';
}
$(document).ready(function() {
var table = $('#devis_predef_list').DataTable( {
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ' ',
"width": "10%"
},
{ "data": "id","width": "5%" },
{ "data": "nom", "width": "20%" },
{ "data": "date_creation", "width": "15%" },
{ "data": "total_htva", "width": "10%" },
{ "data": "total_tva", "width": "10%" },
{ "data": "total_taxes", "width": "10%" },
{ "data": "grand_total", "width": "10%" },
{ "data": "actions", "width": "10%" }
],
"order": [[1, 'asc']],
"language": {
"lengthMenu": 'Afficher <div class="styled-select-dt"><select class="styled-dt">'+
'<option value="10">10</option>'+
'<option value="20">20</option>'+
'<option value="30">30</option>'+
'<option value="40">40</option>'+
'<option value="50">50</option>'+
'<option value="-1">All</option>'+
'</select></div> lignes'
}
} );
// Add event listener for opening and closing details
$('#devis_predef_list tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
//On récupère l'id de la ligne.
var idline = row.data().id;
det_devis_predef(idline);
}
} );
} );
Et ensuite ma boucle construisant les différentes lignes du tableau ( le dialogue est compris dans la boucle car chaque dialogue dispose d'attribut propres.) :
while ($obj=mysql_fetch_object($req)) {
//Calcul du total taxe
$tot_taxes=$obj->tot_recupel+$obj->tot_reprobel+$obj->tot_auvibel+$obj->tot_bebat;
//Calcul du grand total
$gd_tot=$obj->tot_htva+$obj->tot_tva+$tot_taxes;
?>
<div id="my-confirm-dialog<?php echo $obj->id;?>" class="dialog-overlay">
<div class="dialog-card">
<div class="dialog-question-sign"><i class="fa fa-question"></i></div>
<div class="dialog-info">
<h5>Ètes vous sur de vouloir supprimer le devis "<?php echo stripslashes($obj->name);?>"</h5>
<button class="dialog-confirm-button">Oui</button>
<button class="dialog-reject-button">Non</button>
</div>
</div>
</div>
<tr id="<?php echo $obj->id;?>">
<td></td>
<td><?php echo $obj->id;?></td>
<td class="edit_name" id="<?php echo $obj->id;?>"><?php echo stripslashes($obj->name);?></td>
<td><?php echo dateUSA_to_dateEU($obj->date_creation);?></td>
<td><?php echo $obj->tot_htva;?> €</td>
<td><?php echo $obj->tot_tva;?> €</td>
<td><?php echo $tot_taxes;?> €</td>
<td><?php echo $gd_tot;?> €</td>
<td>
<!-- UTILISER -->
<a href="#overlay3"><button class="icons fa-flask fa-3x fa-fw action" title="Utiliser" onclick="attrib_dev_predef(<?php echo $obj->id;?>)"></button></a>
<!-- SUPPRIMER -->
<form style="display:inline-block;vertical-align:top;" action="./include/form/del_devis_predef.php" onsubmit='return confirm("Voulez-vous vraiment supprimer le devis <?php echo $obj->name;?> ?")'>
<button class="icons fa-trash fa-3x fa-fw del"></button>
<input type="hidden" value="<?php echo $obj->id;?>" name="id_dev" id="id_dev<?php echo $obj->id;?>"/>
</form>
<!-- AFFICHE DIALOG SUPPRESSION-->
<span class="dialog-show-button" data-show-dialog="my-confirm-dialog<?php echo $obj->id;?>">Afficher</span>
</td>
</tr>
<?php
}
?>
Voilà, je sais pas si d'autre bout de code vous sont nécessaire, j'ai cherché, testé, mais je n'ai pas réussi à identifier ou se situait le problème.
Si j'utilise le même code en initialisant le datatables avec ce code (basique, sans les détails dont j'ai besoin.), tout fonctionne correctement datatables & dialogue :
$(document).ready(function() {
$('#listing').DataTable( {
"language": {
"lengthMenu": 'Afficher <div class="styled-select-dt"><select class="styled-dt">'+
'<option value="10">10</option>'+
'<option value="20">20</option>'+
'<option value="30">30</option>'+
'<option value="40">40</option>'+
'<option value="50">50</option>'+
'<option value="100">100</option>'+
'<option value="-1">All</option>'+
'</select></div> lignes'
},
"pageLength" : 100,
"order": [[0, 'desc']],
});
} );
Merci d'avance à ceux qui prendront le temps de se pencher sur mon problème.
, ms j'etait bloqué au phone avec un client.