web-dev-qa-db-fra.com

PrimeNG DataTable Tri ou filtrage personnalisé (angulaire 2)

Je suis confronté à un problème de tri/filtrage de la colonne de date dans PrimeNg Datatable.Comme j'affiche la chaîne de date "jj/mm/aaaa".

  1. si utilise template pour afficher "jj/mm/aaaa", le filtre ne fonctionne pas en tant que filtre travaillant sur une liaison de données réelle au format ISO.
  2. si les données converties au format chaîne à partir du back-end, le tri n'est pas correct car il trie sur chaîne au lieu de date.
angulardatatableprimeng
4
Rohit Sindhu

J'ai résolu ce problème en utilisant moment.js, parce que c'est plus facile et plus rapide, mais vous pouvez toujours personnaliser le code si vous voulez le faire sans aucun framework (j'espère un peu plus si les conditions et les conversions de chaînes)

Vous devez donc ajouter moment.js à votre projet: A) en ajoutant un lien src à votre fichier d’index html principal (où se trouve le sélecteur angulaire principal, les remplissages multiples, etc.) à partir de ce site https: // cdnjs .com/libraries/moment.js/ b) mais si c'est de la production, je recommande de l'ajouter via npm. http://momentjs.com/docs/ voici d'autres possibilités.

Ensuite, vous devez déclarer la variable moment sous les instructions import et au-dessus de l'annotation @Component

declare var moment;

alors si vous avez déjà ajouté le module primeng à votre projet, dans le fichier html de la balise p-dataTable de primeng, il y a une balise p-column et ici, dans cette balise, nous devons ajouter sortable = "custom" et (sortFunction) = "mysort ( $ event) "comme suit:

<p-column field="date" header="Data" sortable="custom" (sortFunction)="mysort($event)"></p-column>

La date affichée avec la balise de la colonne p est au format de chaîne JJ.MM.AAAA, comme par exemple: 03.01.2017

Après cela, dans le composant où nous allons chercher et pousser des données dans un tableau, qui est utilisé pour afficher des données dans une table, dans mon exemple nommé rendez-vous, nous devons ajouter une fonction nommée mysort (car nous appelons cette fonction dans une balise HTML p-column)

mysort(event) {
    let comparer = function (a, b): number {
      let formatedA = moment(a.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let formatedB = moment(b.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let result: number = -1;

      if (moment(formatedB).isBefore(formatedA, 'day')) result = 1;
      return result * event.order;
    };

    this.appointments.sort(comparer);
}

dans mon exemple, a.date et b.date est une chaîne du type "21.12.2016" que nous devons formater en AAAA-MM-JJ. Ensuite, nous comparons simplement les dates.

Et juste, j'ai vérifié ce code et ça marche. J'espère que ça va aider quelqu'un et m'excuser si l'explication est écrite dans un style tutoriel mais ceci est ma première réponse et je voulais le faire de la bonne manière :)

10
Relis

Je l'ai résolu de la même manière que Relis. Cependant, cela n'a pas fonctionné jusqu'à ce que je réaffecte la variable "this.appointments".

  mysort(event) {

     this.appointments.sort((appointmentA, appointmentB) => {

     // Here the property date is a date string with the format 'dd/mm/yyyy'. 
     // In the constructor of moment(), the second paramater is 
     // the format of the string you're passing in.
     const momentA = moment(appointmentA.date, 'dd/mm/yyyy');
     const momentB = moment(appointmentB.date, 'dd/mm/yyyy');

     if(momentB.isBefore(momentA)){
       result = 1;
     }

     return result * event.order;
   });

    // This is the key here.
    this.appointments = [...this.appointments];
    }
1
jriver27

Au début, remerciez @Relis pour sa réponse utile, même si je l’ai utilisée pour résoudre un problème un peu différent. En ce qui concerne la question, je pense que cela pourrait être résolu sans fonctions supplémentaires ni rappels qui vous obligeraient à convertir la date. chaque fois que l'en-tête est cliqué. Vous devez simplement séparer votre modèle et votre représentation (modèle de tri et de représentation pour afficher les données dans la table de données) Imaginons un tableau d'objets avec des propriétés de date:

let dataArray = [{date:'01/02/2016'},{date:'01/02/2017'}]

Ensuite, vous pouvez étendre chaque objet de ce tableau avec la propriété supplémentaire sortableDate:

 let dataArray = [{date:'01.02.2016', sortableDate:'2016-02-01'},{date:'01.02.2017', sortableDate:'2017-02-01'}]

Pour la transformation, je suggère également d'utiliser moment.js . Vous pouvez maintenant utiliser l'une des propriétés pour afficher la valeur et une autre pour trier:

<p-column [field]="'mySortableDate'" [header]="'Header name' [sortable]="true">
  <ng-template let-col let-data="rowData" pTemplate="body">
    <span>{{data.date}}</span>
  </ng-template>
</p-column>
0
nitoloz

Simplement Trick 

<p-column field="StartDate" [editable]="true" header="Start Date">
<ng-template let-col let-car="rowData" pTemplate="body">
 <span>{{car[col.field] | date: '  d,MMM,yyyy'}}</span>
</ng-template>                         
 </p-column>

0
Sachin from Pune