Datatables – Configuration de la langue FR

Michaël 0

J’ai commencé la fois dernière à parler de l’utilisation du plugin datatable pour jQuery. Aujourd’hui, je veux donner quelques éléments de configuration via le JavaScript. Histoire de ne pas mettre 3 mois à sortir cet article, je le ferai probablement relativement réduit, et j’essaierai d’écrire la suite rapidement…

Pour rappel, je ne suis pas un pro du développement. Je reprends après plusieurs années sans en avoir fait, et en sachant que mes premières années étaient un apprentissage en pur autodidacte, et vraiment très “artisanal”. Mais du coup, je mets ici par écrit ce que j’aurai aimé trouver plus facilement.

Le bon nombre de colonne

Oui, petit conseil dès le démarrage, faîtes bien attention à avoir le même nombre de colonnes entre ce que vous configurez dans le JavaScript, et ce que vous avez dans votre élément “table” dans votre HTML. Sinon vous aurez des messages d’erreurs à chaque chargement. Même si les données sont chargées, ça reste très pénible d’avoir un message d’erreur à chaque chargement de page.

Désolé, j’ai zappé de faire une capture d’écran quand j’avais ces problèmes… Mais en tout cas, c’est la première chose à vérifier quand vous avez un problème de message d’erreur avec dataTable.

Configurer pour utiliser la langue française

Pour avoir les libellés en français pour les différents boutons, il faut indiquer un fichier de traduction. Vous pouvez télécharger la traduction au format json sur Github : https://github.com/DataTables/Plugins/blob/master/i18n/fr-FR.json.

Ensuite il faut indiquer à datatable où se trouve ce fichier de traduction. Dans mon projet, je l’ai téléchargé en local (dans le répertoire “build”), et mis par défaut pour toute instance de datatable avec ces lignes :

$.extend(true, $.fn.dataTable.defaults, {
        language: {
            url: '/build/datatables-fr-FR.json'
        },
});

Vous pouvez aussi pointer vers un CDN comme : https://cdn.datatables.net/plug-ins/1.12.0/i18n/fr-FR.json. Au cas où il changerait, l’adresse du CDN est indiquée sur cette page-là : https://datatables.net/plug-ins/i18n/French.

Vous remarquerez au passage que le "$.extend(true, $.fn.dataTable.defaults, {" permet de mettre des paramètres par défaut (pour toute votre application) aux datatables. Dans le cas du langage fr, nous n’aurons donc plus besoin de l’indiquer. A chaque fois que nous ferons un $("selecteur").datatable(), nous créerons une instance en français.

Voilà pour cette fois-ci. J’essaye de rédiger la suite rapidement, et pas dans 3 mois…

@+ !

Michaël

Tags:

Michaël

Chrétien, de formation scientifique (chimie) mais recyclé (c'est bien vu à notre époque) dans l'informatique, je m'intéresse à un tas de choses. Vous retrouverez donc ce joyeux mélange sur ce site. Certains sujets m'ayant donné du fil à retordre, je me dis qu'en écrivant ces articles, ça peut aider certaines personnes à trouver plus rapidement.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.