Autres scripts

Filtrer, trier et totaliser

avec AngularJS (avec w3.js)

---

Extrait du code HTML

      <div class="article" data-ng-app="myApp" data-ng-controller="myCtrl">
        <p class="note">
          Pour trier les colonnes, cliquez sur le nom de la colonne. (Recliquer pour modifier
          l'ordre du tri)
        </p>
        <table>
          <tr style="background-color:orange; cursor:pointer;">
            <th data-ng-click="sortBy('a')">
              N° extrait <span class="sortorder" data-ng-show="propertyName === 'a'" data-ng-class=
              "{reverse: reverse}"> </span>
            </th>
            <th data-ng-click="sortBy('b')" title="valeur ou d'exécution">
              Date <span class="sortorder" data-ng-show="propertyName === 'b'" data-ng-class=
              "{reverse: reverse}"> </span>
            </th>
            <th data-ng-click="sortBy('c')" title="Les montants négatifs sont précédés du signe -">
              Montant <span class="sortorder" data-ng-show="propertyName === 'c'" data-ng-class=
              "{reverse: reverse}"> </span>
            </th>
            <th data-ng-click="sortBy('d')">
              Solde <span class="sortorder" data-ng-show="propertyName === 'd'" data-ng-class=
              "{reverse: reverse}"> </span>
            </th>
            <th data-ng-click="sortBy('e')" title="ou prélevement de la banque">
              N° IBAN du tiers<span class="sortorder" data-ng-show="propertyName === 'e'"
              data-ng-class="{reverse: reverse}"> </span>
            </th>
            <th data-ng-click="sortBy('f')">
              Catégorie <span class="sortorder" data-ng-show="propertyName === 'f'" data-ng-class=
              "{reverse: reverse}"> </span>
            </th>
          </tr>
          <tr data-ng-repeat=
          "x in resultValue=(tab | filter:{'e':search}) | orderBy:propertyName:reverse" style=
          "text-align:right;">
            <td>
              {{x.a}}
            </td>
            <td>
              {{x.b | date}}
            </td>
            <td>
              {{x.c | currency}}
            </td>
            <td>
              {{x.d | currency}}
            </td>
            <td>
              {{x.e}}
            </td>
            <td>
              {{x.f}}
            </td>
          </tr>
        </table>
        <p>
          Pour n'afficher que les transactions liées à un compte tiers et leur montant total<br />
          tapez le début de son code IBAN : <input type="text" placeholder="BE..."
          data-ng-model="search" /> => <output style=
          "background-color:black;color:white"> {{resultValue | sumOfValue:'c' | currency}} </output>
        </p>
        <p class="centrer">
          <button data-ng-click="restaurer()">Restaurer le tableau</button>
        </p>
      </div>

---

Code source JS

angular.module('myApp',[]).controller('myCtrl',["$scope", "$q", function($scope, $q) {

  $scope.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"}
  ];

  $scope.propertyName = 'a'; /* nom d'un champ = tri initial */
  $scope.reverse = false;  /* tri ascendant (du plus petit au plus grand) */

  $scope.sortBy = function(propertyName) {
    $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
    $scope.propertyName = propertyName;
  };

  $scope.restaurer = function(){
    $scope.search="";
  };

}]).filter('sumOfValue', function() {
    return function(data, key) {
      var sum = 0;
      angular.forEach(data, function(v, k) {
        sum += parseFloat(v[key]);
      });
      return sum;
    }
});