Pour trier les colonnes, cliquez sur le nom de la colonne. (Recliquer pour modifier l'ordre du tri)
Avec les navigateurs de Microsoft, le tri des colonnes non-monétaires n'est pas effectué correctement. De plus, peut s'afficher :"Internet explorer a restreint l'exécution des scripts ou des contrôles ActiveX sur cette page Web." suivi du bouton . Autoriser pour afficher le tableau correctement. NB : Appuyer sur la touche F5 pour réafficher ce message.
| N° extrait | Date | Montant | Solde | N° IBAN du tiers | Catégorie |
|---|---|---|---|---|---|
| {{a}} | {{bb}} | {{cc}} | {{dd}} | {{e}} | {{f}} |
Pour n'afficher que les transactions liées à un compte tiers,
tapez le début de son code IBAN : =>
Extrait du code HTML
<p class="note">
Pour trier les colonnes, cliquez sur le nom de la colonne. (Recliquer pour modifier
l'ordre du tri)
</p>
<table id="myTable">
<!-- ajouter les flèches haut et bas du tab3.css -->
<tr style="background-color:orange; cursor:pointer;">
<th onclick="sort(0)">
N° extrait <span id="symbol0" class="symbol"></span>
</th>
<th onclick="sort(1)">
Date <span id="symbol1" class="symbol"></span>
</th>
<th onclick="sort(2)">
Montant <span id="symbol2" class="symbol"></span>
</th>
<th onclick="sort(3)">
Solde <span id="symbol3" class="symbol"></span>
</th>
<th onclick="sort(4)">
N° IBAN du tiers <span id="symbol4" class="symbol"></span>
</th>
<th onclick="sort(5)">
Catégorie <span id="symbol5" class="symbol"></span>
</th>
</tr>
<tr data-w3-repeat="transactions" class="item" style="text-align:right;">
<td>
{{a}}
</td>
<td>
{{bb}}
</td>
<td>
{{cc}}
</td>
<td>
{{dd}}
</td>
<td>
{{e}}
</td>
<td>
{{f}}
</td>
</tr>
</table>
<p>
Pour n'afficher que les transactions liées à un compte tiers,<br />
tapez le début de son code IBAN : <input placeholder="BE..." id=
"myInput" onkeyup="filtrer(this,4)" /> => <output id="result" style=
"background-color:black;color:white"> {{somme}} </output>
</p>
<p class="centrer">
<button onclick="restaurer()">Restaurer le tableau</button>
</p>
Code source JS
var mois=["jan","fév","mars","avr","mai","juin","juil","aout","sept","oct","nov","déc"];
var asc=[false,true,true,true,true,true];
var tab=[
{a:"2017-0044",b:"2017-05-08",c:-6,d:6370.16,e:"BE45000412456789",f:"Compte du gérant"},
{a:"2017-0045",b:"2017-05-01",c:-3,d:6367.16,e:"REDEVANCE MENSUELLE",f:"Frais bancaires"},
{a:"2017-0046",b:"2017-05-01",c:-0.74,d:6366.42,e:"FRAIS MENSUELS",f:"Frais bancaires"},
{a:"2017-0047",b:"2017-05-09",c:-70,d:6296.42,e:"BE45000412456789",f:"Compte du gérant"},
{a:"2017-0048",b:"2017-05-12",c:2031.09,d:8327.51,e:"BE44001130669876",f:"Vente"},
{a:"2017-0049",b:"2017-05-13",c:-1415.86,d:6911.65,e:"BE17270012344421",f:"Achat matériel"}
];
var w3tab = {"transactions":tab};
var w3tabsom;
var w3tabFilter;
myCtrl(w3tab);
function myCtrl(myObject) {
var x = myObject.transactions;
var som=0;
for (var i = 0; i < x.length; i++) {
x[i]["bb"] = dateFr(x[i]["b"]);
x[i]["cc"] = x[i]["c"].toLocaleString('fr-BE',{ style:'currency',currency:'EUR'});
x[i]["dd"] = x[i]["d"].toLocaleString('fr-BE',{ style:'currency',currency:'EUR'});
som+=(x[i]["c"]*100);
}
w3.displayObject("myTable", myObject);
w3tabFilter = JSON.parse(JSON.stringify(w3tab));
w3tabsom=(som/100).toLocaleString('fr-BE',{ style:'currency',currency:'EUR'});
w3.displayObject("result",{"somme":w3tabsom});
}
function dateFr(aaaa_mm_jj){
var parts = aaaa_mm_jj.split("-");
var j=parts[2]; if (parts[2][0]=="0") j=parts[2][1];
return j+" "+mois[parseInt(parts[1]-1)]+" "+parts[0];
}
function restaurer(){
document.getElementById("myInput").value="";
w3.displayObject("myTable", w3tab);
w3tabFilter = JSON.parse(JSON.stringify(w3tab));
w3.displayObject("result",{"somme":w3tabsom});
asc[0]=false;
}
function filtrer(input,numCol) {
var filter = input.value.toUpperCase();
w3tabFilter = JSON.parse(JSON.stringify(w3tab));
var x = w3tabFilter.transactions;
var y = new Array;
var som=0;
for (var i = 0; i < x.length; i++) {
if(x[i]["e"].indexOf(filter) > -1) {
y.push(x[i]);
som+=(x[i]["c"]*100);
}
}
w3tabFilter={"transactions":y};
w3.displayObject("myTable",{"transactions":y});
som=(som/100).toLocaleString('fr-BE',{ style:'currency',currency:'EUR'});
w3.displayObject("result",{"somme":som});
}
function sort(numCol){
var new_w3tab = JSON.parse(JSON.stringify(w3tabFilter));
var x = new_w3tab.transactions;
if(asc[numCol]){
asc[numCol]=false;
switch(numCol){
case 0 : x.sort(function (a, b) {return a.a > b.a;});break;
case 1 : x.sort(function (a, b) {return a.b > b.b;});break;
case 2 : x.sort(function (a, b) {return a.c - b.c;});break;
case 3 : x.sort(function (a, b) {return a.d - b.d;});break;
case 4 : x.sort(function (a, b) {return a.e > b.e;});break;
case 5 : x.sort(function (a, b) {return a.f > b.f;});break;
}
}else{
asc[numCol]=true;
switch(numCol){
case 0 : x.sort(function (a, b) {return a.a < b.a;});break;
case 1 : x.sort(function (a, b) {return a.b < b.b;});break;
case 2 : x.sort(function (a, b) {return b.c - a.c;});break;
case 3 : x.sort(function (a, b) {return b.d - a.d;});break;
case 4 : x.sort(function (a, b) {return a.e < b.e;});break;
case 5 : x.sort(function (a, b) {return a.f < b.f;});break;
}
}
w3.displayObject("myTable",{"transactions":x});
if(asc[numCol]) document.getElementById("symbol"+numCol).innerHTML=" ▼";
else document.getElementById("symbol"+numCol).innerHTML=" ▲";
}
Extrait du code source CSS
table{width:100%;}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(odd) {
background-color: #A9A9A9;
}
tr:nth-child(even) {
background-color: white;
}