AngularJS : Afficher plusieurs ngTable sur une même page.

Le module ngTable permet d’afficher sous la forme d'un tableau une collection d’éléments. On peut facilement ajouter à ces tableaux des outils de filtrage, pagination, tri etc.
L’utilisation de ce module est très simple et le rendu efficace.
Toutefois dans le cas où l'on doit afficher plusieurs tableaux sur une même page et que chacun de ces tableaux est issu d’une collection différente, on constate rapidement de nombreux effets de bord. Par exemple, le tri sur une colonne du tableau 1 va également trier le tableau 2, le filtrage sur un premier tableau va également agir sur le second etc.
La solution proposée dans les exemples du site ne convient pas car elle présente plusieurs tableaux réalisés sur une seule et même collection.
Pour contourner ce problème, il faut initialiser les valeurs du tableau avec une variable stockée dans le $scope.

Bien-sûr chaque tableau a son propre identifiant et ses propres paramètres d’initialisations.

Code d'un exemple classique qui ne fonctionne pas avec plusieurs tableaux :

Partie JS

var data = [{name : ‘Jean’}] ;
$scope.tableParams = new ngTableParams({
 page: 1,            // show first page
 count: 10           // count per page
}, {
 total: 0, // length of data
 getData: function($defer, params) {
  var filteredData = params.filter() ? $filter('filter')(data, params.filter()) :    data;
  var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) :data;
  params.total(orderedData.length);
  $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
 }
});

Partie HTML

<table ng-table=" tableParams " show-filter="true">
 <tr ng-repeat="item in $data>
  <td data-title="Nom" sortable="'name'" filter="{ 'name': 'text' }"> {{item.name}}</td>
 </tr>
</table>

Code à utiliser quand on a plusieurs tableaux sur une même page :

Partie JS

 
$scope.data= [{name : ‘Jean’}] ;
data = $scope.data;
$scope. tableParams  = new ngTableParams({
 page: 1, // show first page
 count: 10, // count per page
}, {
 total: 0, // length of data
 getData: function($defer, params) {
  var filteredData = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
  var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) :$scope.data;
  params.total(orderedData.length);
  $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
 }
});

Partie HTML
Côté HTML pas de changement, la boucle va chercher les éléments dans la bonne collection.

 
<table ng-table=" tableParams " show-filter="true">
 <tr ng-repeat="item in $data>
  <td data-title="Nom" sortable="'name'" filter="{ 'name': 'text' }"> {{item.name}}</td>
 </tr>
</table>

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.