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.