1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
|
$(function(){
var dataAjax={
ach:{
max:{suffixe:25,nom_action:"Derichebourg",marge:"142.86",jrs_posit:5,nbr:1},
min:{suffixe:17,nom_action:"Bouygues",marge:"6.02",jrs_posit:2,nbr:1},
moy:{nbr:17,marge:"27.6",jrs_posit:"3.4"}
},
vte:{
max:{suffixe:32,nom_action:"Essilor",marge:"8.53",jrs_posit:2,nbr:1},
min:{suffixe:32,nom_action:"Essilor",marge:"8.53",jrs_posit:2,nbr:1},
moy:{nbr:1,marge:"8.5",jrs_posit:"2.0000"}
},
indef:{
nbr:{nbr:19,date_num:200},
date:"15/10/2002",
date_num:37544
}
};
function fillTableEtape1(table, data){
//click sur les boutons .btn-table (par délégation)
table.on('click','.btn-table',function(event) {
console.log("suffixe :"+$(this).data("suffixe"));
});
var tbody = $("<tbody>");
//d'après la structure que tu m'a montré, les variables date_num et date existent seulement dans l'objet dataAjax.indef, donc pour les récupérer : data.indef.date_num et data.indef.date:
table.children('thead').find("td:first-child")
.text(data.indef.date_num+' - '+data.indef.date);
//on crée le bouton une seule fois et en dehors des each !
var btn = $('<button>')
.append($("<i>").addClass("fas fa-chart-line"))
.addClass("btn btn-link btn-table p-0");
$.each(data, function(cle, val) {
if($.isPlainObject(val)){
tbody.append( $('<tr>').append( $('<th>').prop('colspan', 7)
.text(cle.toUpperCase()) ) );
$.each(val, function(cle1, val1) { //cle1 et val1 !!
tbody.append(
$('<tr>')
.append( $('<td>').html(cle1))
//conditions ternaire pour remplacer les (null,undefined,NaN)
.append($('<td>').html(val1.nbr?val1.nbr:'--'))
.append($('<td>').html(val1.marge?val1.marge:'--'))
.append($('<td>').html(val1.jrs_posit?Math.round(val1.jrs_posit):'--'))
.append($('<td>').html(val1.suffixe?val1.suffixe:'--'))
.append($('<td>').html(val1.nom_action?val1.nom_action:'--'))
.append(
$('<td>')
.html(
btn.clone()//cloner le bouton
.data({
"suffixe":val1.suffixe?val1.suffixe:"aucun suffixe",
"date_num":val1.date_num?val1.date_num:"aucun date num"
})
)
)
)
});
}
});
//là tu n'as plus besoin de cette ligne qui remplace les undefined nan null....
//tbody = tbody.html().replace(/NaN/g, "--").replace(/undefined/g, "--").replace(/null/g, "--");
table.children('tbody').append(tbody.find("*"));//ici .children(),ou bien .find(*) mais pas tbody
return true;
}
fillTableEtape1($("#test"),dataAjax);
}); |
Partager