datatables ne se modifie pas à l'écran. Pourquoi ?
Bonjour à tous,
J'utilise jquery et datatables.
J'ai un souci avec une routine javascript "plus()",
qui gère des checkbox.
Sans entrer dans le détail, en voici le fonctionnement.
chaque checkbox cochée :
- visualise une colonne (en fonction de la variable colhidden) et
- diminue la hauteur de la table (et des blocs englobants)
Cela ce sont les souhaits...
La réalité est loin de là !
Tout fonctionne, sauf...
la redéfinition du dataTables !!!
voici un lien de la page
Pouvez-vous m'aider ?
D'avance, je vous en remercie !
Code:
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
function plus(element) {
var elements = element.form.elements;
var ii = 0;
var colhidden = new Array();
var sk, swtrouve;
var nbsuppl = 0;
var nboption = 0;
for (var k=0; k<elements.length; k++) {
if (elements[k].type == "checkbox") {
for (var m=0; m<8; m++) {
if (elements[k].value == option[m]) {
if (elements[k].checked) {
if (elements[k].value != "Colette") {
nbsuppl++;
}
nboption++;
} else {
colhidden[ii] = 7 + m;
ii++;
}
m=8;
break;
}
}
}
}
var haut1204 = parseInt((nbsuppl+2)/3) * 79;
var bloc10 = (263+haut1204)+"px";
var bloc11 = (263+haut1204)+"px";
var bloc12 = (253+haut1204)+"px";
var bloc13 = (245+haut1204)+"px";
var bloc30 = (650-haut1204)+"px";
var bloc31 = (638-haut1204)+"px";
var bloc32 = (620-haut1204)+"px";
var example = (615-haut1204)+"px";
var coef = (100 + 10 * nboption)+"%";
var size = 15-nboption;
if (size < 12) {
size = 12;
}
size = size+"px";
document.getElementById('example').style.fontSize=size;
document.getElementById('example').style.height=example;
document.getElementById('bloc10').style.height=bloc10;
document.getElementById('bloc11').style.height=bloc11;
document.getElementById('bloc12').style.height=bloc12;
document.getElementById('bloc13').style.height=bloc13;
document.getElementById('bloc30').style.height=bloc30;
document.getElementById('bloc31').style.height=bloc31;
document.getElementById('bloc32').style.height=bloc32;
for (k=0; k<elements.length; k++) {
if ((elements[k].type == "checkbox") && elements[k].value != "Colette") {
name=elements[k].name;
name=name.substr(8);
name=name.substr(0,name.length-1);
name=parseInt(name)+11;
name="choix"+name;
if (elements[k].checked) {
document.getElementById(name).style.visibility="visible";
document.getElementById(name).style.width="200px";
document.getElementById(name).style.height="59px";
document.getElementById(name).style.maxWidth="200px";
document.getElementById(name).style.maxHeight="59px";
document.getElementById(name).style.marginTop="13px";
document.getElementById(name).style.marginRight="9px";
document.getElementById(name).style.marginBottom="7px";
document.getElementById(name).style.marginLeft="9px";
} else {
document.getElementById(name).style.visibility="hidden";
document.getElementById(name).style.width="0px";
document.getElementById(name).style.height="0px";
document.getElementById(name).style.maxWidth="0px";
document.getElementById(name).style.maxHeight="0px";
document.getElementById(name).style.marginTop="0px";
document.getElementById(name).style.marginRight="0px";
document.getElementById(name).style.marginBottom="0px";
document.getElementById(name).style.marginLeft="0px";
}
}
}
$('#example').dataTable( {
"sScrollY": example,
"bPaginate": false,
"aoColumnDefs": [ {
"bVisible": false,
"aTargets": colhidden
} ],
"sScrollX": "100%",
"sScrollXInner": coef,
"bRetrieve": true
} );
} |
