Discussion :

[Clement_archeo]

Bonjour à vous,
je gère un site développé sous worpress. je suis bien débutant en code, mais j'aimerais mettre en forme certains de mes tableaux en utilisant les js et css de dataTable.
Cela fonctionne si j'insère le code suivant directement dans le Header :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
    $('#Tableau').DataTable();
} );
</script>

Seulement, j’aimerais l’insérer dans function.php pour que ça soit plus propre et j’aimerais cibler certaines pages, car autrement ça fait planter d’autres extensions de wordpress.
Pour l'instant, j'ai insérer la première partie du code cf ci-dessous, mais je n'arrive pas à traduire l'ensemble pour que ça fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/activer DataTables	
	function Tables_enqueue_styles() {
      wp_enqueue_style('Tables-style','https://nightly.datatables.net/css/jquery.dataTables.css' ); 
}
 
function Tables_enqueue_scripts() {
    wp_enqueue_script('DataTables_js','https://nightly.datatables.net/js/jquery.dataTables.js');
	wp_enqueue_script('jquery_js','http://code.jquery.com/jquery-1.11.3.min.js');
}
 
add_action( 'wp_enqueue_scripts', 'Tables_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'Tables_enqueue_scripts' );

Est-ce que l’un ou l’une d’entre vous pourrait m’éclairer ?

merci d’avance

[mathieu]

qu'est ce qui ne fonctionne pas pour le moment ?

[Clement_archeo]

en fait, pour l'instant ça fonctionne si j'insère le premier code dans le header. Mais ça fait planter d'autres extensions de wordpress (notamment du fait de l'appel à jquery), donc je voudrais le transposer proprement dans le fichier function.php qui gère mon thème sous wordpress et j'aimerais inclure des conditions d'execution pour que l'appel aux librairies ne se fassent que sur certains modèles de pages ciblés.
je ne sais pas si je suis très clair (sachant que je suis débutant en code...et presque ignorant en js)

[darkstar123456]

Bonjour,

jQuery est chargé par défaut dans Wordpress donc pas besoin de l'y rajouter une nouvelle fois.

Le hook wp_enqueue_scripts charge aussi bien les CSS que les JS donc tu peux tout mettre dans la même fonction.
Dans la fonction wp_enqueue_script(), le 3e paramètre est "les dépendances", cela permet de dire (dans mon exemple) que ce JS doit être chargé APRÈS jQuery.
Le 4e sert pour le versionning et enfin le dernier pour dire s'il faut charger dans le footer ou non (c'est mieux de le faire)

Il est fort probable que ton code ne fonctionnait pas juste à cause de jQuery. S'il est chargé deux fois, cela peut créer des erreurs et donc plus aucun JS n'est exécuté.
De toute façon, il aurait fallu que tu register jQuery AVANT ta lib des DataTables ;-)

Reviens-nous si ça ne fonctionne pas avec le code ci-dessous

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function tables_enqueue_scripts()
{
    wp_enqueue_style('DataTables_css', 'https://nightly.datatables.net/css/jquery.dataTables.css');
    wp_enqueue_script('DataTables_js', 'https://nightly.datatables.net/js/jquery.dataTables.js', ['jquery'], FALSE, TRUE);
}
 
add_action('wp_enqueue_scripts', 'tables_enqueue_scripts');

[Invité]

Bonjour,

sinon, il existe des plugins (extensions) :

• WP jQuery DataTable
• WP DataTable
• wpDataTables
• ...

A tester... (?)

[Clement_archeo]

Bonjour,
merci beaucoup pour ta réponse darkstar 123456.
je vais donc essayer cette solution.
Toutefois, je dois aussi insérer le script suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
$(document).ready( function () {
    $('#Tableau').DataTable();
} );
</script>

ET j'avoue ne pas savoir comment faire pour l'insérer dans function.php.
Autrement, pour le ciblage d'un modèle en particulier, j'ai vu cette solution : https://mekshq.com/include-javascrip...age-templates/ Est-ce qu'elle vous paraît juste ?

Autrement, pour te répondre jreaux62, au départ, j'avais fonctionné avec des plugins de tables sous Wordpress, mais il y a beaucoup de problèmes de mise à jour (WP DataTable n'est plus compatible avec la version actuelle de wordpress par exemple) et c'est souvent très contraint : il faut importer des données et ça ne gère pas les liens avec une base MySQL (ou alors c'est payant). Du coup, c'est pour ça que je développe mon propre plugin et j'essaie de voir avec les librairies js.

[darkstar123456]

Rebonjour,

Ce lien présente effectivement la bonne solution : se baser sur les templates (par contre, plutôt que d'aller chercher la valeur avec get_post_meta(), il est plus simple d'utiliser directement get_page_template_slug()

Pour ce qui est de ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
$(document).ready( function () {
    $('#Tableau').DataTable();
} );
</script>

Le mieux à faire est de le mettre dans un fichier JS que tu chargeras (comme présenté dans ton lien)
Si tu veux absolument ajouter ton code sans fichier supplémentaire, alors il faudra utiliser le hook wp_footer

[Invité]

1- Un "mode d'emploi" ici.

2- Avec Wordpress, il faut utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
jQuery(document).ready(function( $ ){
....

[Clement_archeo]

merci beaucoup pour ces réponse.
Avant de cibler un template en particulier, j'ai donc essayé le code de manière générale en insérant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function script_datatable() {
   $(document).ready( function () {
    $('#Tableau').DataTable();
} );
}
add_action( 'wp_footer', 'script_datatable' );

mais j'ai une parse error : Parse error: syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or '$' in C:\wamp64\www\XX\wp-content\themes\twentytwelve\functions.php on line 732. Ai-je fait une erreur qqpart ?

[Clement_archeo]

j'avais pas vu ta réponse jreaux62. je regarde ça de suite et je reviens vers vous si besoin.
Merci

[darkstar123456]

Ha oui c'est normal, t'es en train d'écrire du JS directement dans PHP =D

Essaye ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function script_datatable() {
// Vu qu'on est en PHP, on va en sortir pour écrire de l'HTML
// On oublie pas non plus les tags <script> ;-)
?>
<script>
   $(document).ready( function () {
    $('#Tableau').DataTable();
} );
</script>
<?php
// On a fini notre HTML donc on ré-ouvre PHP :)
}
add_action( 'wp_footer', 'script_datatable' );

J'avais mis le lien du hook "wp_footer", ça permet juste d'écrire en fin de document


Notabene : Voici la façon recommandée pour faire un document.ready en jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(function() {
  // Handler for .ready() called.
});

[Clement_archeo]

merci pour vos réponses.
En reprenant l'ensemble, j'ai inséré le code suivant dans function.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function tables_enqueue_scripts()
{
    wp_enqueue_style('DataTables_css', 'https://nightly.datatables.net/css/jquery.dataTables.css');
    wp_enqueue_script('DataTables_js', 'https://nightly.datatables.net/js/jquery.dataTables.js', ['jquery'], FALSE, TRUE);
	wp_enqueue_script('script-perso', get_stylesheet_directory_uri() . '/custom-js/custom-jquery.js', array( 'jquery' ) );
}
 
add_action('wp_enqueue_scripts', 'tables_enqueue_scripts');

et j'ai inséré le code suivant dans le fichier ciblé custom-jquery.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 JQuery(document).ready( function ($) {
    $('#Tableau').DataTable();
} );

Malgré tout ça, ça ne fonctionne pas et en regardant la console, il m'indique que $ n'est pas une fonction...

[darkstar123456]

Essaye ceci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function ($) {
	 $('#Tableau').DataTable();
})(jQuery);

Es-tu certain que jQuery est bien présent dans ta page ?
Tu n'as pas l'air très à l'aise avec les hooks WP et bien que jQuery vienne avec Wordpress, il est possible de le retirer ^^

Regarde donc dans l'onglet "Network" de l'inspecteur/console et assure-toi que jQuery est bien chargé.

Après, de ce que je vois tu vas rencontrer un autre problème : quand tu auras réglé le problème du $, tu devrais avoir "DataTable is not defined" vu que tu charges ton fichier custom AVANT la librairie DataTable.
Tes chargements devraient ressembler à ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
wp_enqueue_script('DataTables_js', 'https://nightly.datatables.net/js/jquery.dataTables.js', ['jquery'], FALSE, TRUE);
wp_enqueue_script('script-perso', get_stylesheet_directory_uri() . '/custom-js/custom-jquery.js', array( 'jquery', 'DataTables_js' ), FALSE, TRUE );

Comme tu peux le voir, j'ai ajouté la dépendance "DataTables_js" à ton fichier custom, de plus je l'ai chargé dans le footer (grâce au dernier TRUE).
Théoriquement, le premier implique l'autre (grâce à la dépendance) mais c'est plus lisible de le voir directement dans l'appel à la fonction :-)

Par contre, sans la dépendance et du fait que DataTables_js était chargé dans le footer mais pas ton custom JS, ça voulait dire que ton JS était chargé avant la lib.

[Clement_archeo]

ouah super merci !
Tes dernières correction Darkstar on fait fonctionner le bazar...et vu que c'est intégré proprement, ça ne fait pas de conflit avec les autres extensions de wordpress...donc j'ai pas besoin de cibler des templates...nickel !!
Et si je peux abuser, dans le fichier custom-jquery.js, est-ce que je pourrais aussi insérer un plugin de traduction (https://datatables.net/plug-ins/i18n/French) est-ce que c'est là qu'il faut que je le fasse (et comment accessoirement) ou ailleurs ?

[Invité]

[QUOTE=Clement_archeo;11191587]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 JQuery(document).ready( function ($) {
    $('#Tableau').DataTable();
} );

POURQUOI n'as-tu pas fait un simple copier-coller de mon code ??

Ça t'aurait éviter de mettre une majuscule (JQuery) !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery(document).ready(function( $ ){

[darkstar123456]

Je ne connais pas cette librairie précisément mais j'imagine que c'est comme pour les autres : il faut charger les traductions AVANT la librairie.
On va donc juste rajouter une ligne avec le lien vers le CDN (trouvé sur ton lien) AVANT la libraire :-)

On pourrait, pour être sûr, avoir ['jquery', 'DataTables_js_i18n'] dans les dépendances de la librairie mais ce n'est pas forcément nécessaire

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// On demande à charger la traduction
wp_enqueue_script('DataTables_js_i18n', '//cdn.datatables.net/plug-ins/1.10.20/i18n/French.json', ['jquery'], FALSE, TRUE);
// Ensuite on charge la librairie
wp_enqueue_script('DataTables_js', 'https://nightly.datatables.net/js/jquery.dataTables.js', ['jquery'], FALSE, TRUE);
wp_enqueue_script('script-perso', get_stylesheet_directory_uri() . '/custom-js/custom-jquery.js', array('jquery', 'DataTables_js'), FALSE, TRUE);

[Clement_archeo]

pas la tête jreaux62 ! Pas la tête !

Et merci Darkstar, j'ai bien essayé d'insérer suivant ta méthode, en vain...mais c'est un autre sujet. je ne sais pas si la traduction ne se fait pas du fait du plugin ou d'autre chose. je vais regarder.
merci en tout cas à vous pour la résolution

[Invité]

Ben si, la tête !

C'est justement ce genre d'erreurs bêtes qui font tomber les cheveux prématurément !

[Clement_archeo]

ben je suis bien d'accord pour le coup Jreaux62.
J'essaie le plus possible de retaper les code plutôt que de faire des copier-coller pour que j'apprenne mieux, mais j'avais pas vu l'erreur. Merci
du coup, j'ai repris ton code et j'ai essayé d'y insérer directement la traduction suivant ce lien : https://datatables.net/manual/i18n
ça donne par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 jQuery(document).ready( function ($) {
    $('#Tableau').DataTable(	{
        language: {
            search: "Rechercher",
            first:      "Premier",
            previous:   "Précédent",
            Next:       "Suivant",
            last:       "Dernier"
                });
} );

Tout marche, sauf la traduction

[darkstar123456]

Il manque une accolade fermante dans ton code.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
jQuery(document).ready(function ($) {
        $('#Tableau').DataTable({
            language: {
                search: "Rechercher",
                first: "Premier",
                previous: "Précédent",
                Next: "Suivant",
                last: "Dernier"
            } // <= l'accolade qui manque
        });
    });