Transactions

Pour trier les colonnes, cliquez sur le nom de la colonne. (Recliquer pour modifier l'ordre du tri)

Le tri des colonnes non-monétaires n'est pas effectué correctement.

De plus, avec les navigateurs de Microsoft, 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 ou, éventuellement, appuyer sur la touche F5 pour réafficher le message d'Internet Explorer.

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 : => {{somme}}

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>
        <p id="navigator" class="red" title="constat au 8 août 2018">
          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 <button>Autoriser
          le contenu bloqué</button>. Autoriser pour afficher le tableau correctement ou,
          éventuellement, appuyer sur la touche F5 pour réafficher le message d'Internet Explorer.
        </p>
        <table id="myTable">
          <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 ua=window.navigator.userAgent;
var alerte=document.getElementById("alerte");
if ((ua.indexOf("Edge")>-1) || (ua.indexOf(".NET")>-1)) alerte.style.display="block";
  else alerte.style.display="none";

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=" &#x25bc;";
  else document.getElementById("symbol"+numCol).innerHTML=" &#x25b2;";
}

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;
}