Angular 中的 DataTable 如何更改语言

Question

如何在 Angular 中将 DataTable 的语言从英语更改为法语 这是我的代码

<table #mytable *ngIf="utilisateurs" datatable class="row-border hover">
<thead>
    <tr>
        <th>Nom</th>
        <th>Prenom</th>
        <th>Email</th>
        <th>Preference</th>
        <th>Pointe Vente</th>
        <th>Type Utilisateur</th>
        <th>Date Creation</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let u of utilisateurs">
        <td>{{ u.nom }}</td>
        <td>{{ u.prenom }}</td>
        <td>{{ u.email }}</td>
        <td>{{ u.preference }}</td>
        <td>{{ u.nomPointeVente }}</td>
        <td>{{ u.typeUtilisateur }}</td>
        <td>{{ u.dateCreation }}</td>
        <td><i title="editer"  (click)="editer(u)"  class="fas fa-user-edit" style="margin:10px; "   
            data-toggle="modal" data-target="#myModaledit"></i>  <i title="supprimer" class="fas fa-user-times" style="margin:10px; "></i>  <i title="details" class="fas fa-info-circle"style="margin:10px; "></i>  </td>
    </tr>
</tbody>

这是 JQuery 中的更正 我可以在 angular

中这样做吗

<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable( {
        "language": {
            "url": "dataTables.german.lang"
        }
    } );
} );

Answer 1

这是更改数据表中语言的一个很好的例子： 在您的 exemplecomponent.ts 文件中

dtOptions: any  = {};

  ngOnInit(): void {
    this.dtOptions = {
      language: {
        processing:     "Traitement en cours...",
        search:         "Rechercher :",
        lengthMenu:    "Afficher _MENU_ éléments",
        info:           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
        infoEmpty:      "Affichage de l'élement 0 à 0 sur 0 éléments",
        infoFiltered:   "(filtré de _MAX_ éléments au total)",
        infoPostFix:    "",
        loadingRecords: "Chargement en cours...",
        zeroRecords:    "Aucun élément à afficher",
        emptyTable:     "Aucune donnée disponible dans le tableau",
        paginate: {
            first:      "Premier",
            previous:   "Précédent",
            next:       "Suivant",
            last:       "Dernier"
        },
        aria: {
            sortAscending:  ": activer pour trier la colonne par ordre croissant",
            sortDescending: ": activer pour trier la colonne par ordre décroissant"
        }
    },
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true,
    };
  }

Answer 2

1. 为您的语言创建 class 导出（我的语言：french.ts）

   export class DatatableLanguage {
       public static datatableFrench = {
            processing: "Traitement en cours...",
            search: "Rechercher :",
            lengthMenu: "Afficher _MENU_ éléments",
            info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
            infoEmpty: "Affichage de l'élement 0 à 0 sur 0 éléments",
            infoFiltered: "(filtré de _MAX_ éléments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun élément à afficher",
            emptyTable: "Aucune donnée disponible dans le tableau",
            paginate: {
                first: "Premier",
                previous: "Précédent",
                next: "Suivant",
                last: "Dernier"
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
       }
   }
   

2. 将其导入您的组件文件并在您的 [dtOptions]

   中使用它

    import {DatatableLanguage } from "../.."
   
    public dtOptions: any = {}
   
    ngOnInit(): void { 
        this.dtOptions = {
            language : DatatableLanguage.datatableFrench
        }     
    }
   

3. 在您的 HTML 文件中：<table datatable [dtOptions]="dtOptions">