Ajax DataTable

Utiliser Ajax DataTable dans un plugin WordPress

Lorsqu’il s’agit d’intégrer Ajax avec DataTables dans un plugin WordPress, il peut y avoir quelques subtilités à prendre en compte. Dans cet article, nous allons explorer une approche efficace pour utiliser DataTable avec Ajax pour charger des données à partir d’un fichier PHP séparé dans le cadre d’un plugin WordPress.

Introduction à Ajax DataTable

DataTable est une bibliothèque JavaScript qui facilite la manipulation des tableaux HTML. Son utilisation avec Ajax permet de charger dynamiquement des données sans avoir à recharger la page, ce qui améliore l’expérience utilisateur. Dans le cadre de WordPress, le mécanisme d’Ajax nécessite d’utiliser le système d’Ajax de WordPress, qui est géré par l’API admin-ajax.php.

Configuration du plugin WordPress

Avant de plonger dans le code, voyons comment vous devriez structurer votre plugin pour la fonctionnalité Ajax.

Structure du Plugin

1. index.php : Le fichier principal où vous enregistrez les scripts et les styles.
2. page_handler.php : Le fichier qui génère l’HTML pour la page où sera affiché le tableau.
3. cdt.js : Votre fichier JavaScript personnalisé.

Enregistrement des Scripts

Dans votre index.php, assurez-vous que vous enregistrez correctement les scripts nécessaires :

php
function my_plugin_enqueue_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('datatable-js', 'https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js', array('jquery'), null, true);
wp_enqueue_script('my-custom-js', plugin_dir_url(__FILE__) . 'cdt.js', array('jquery', 'datatable-js'), null, true);
wp_localize_script('my-custom-js', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_scripts');

Explication : Ici, nous en sommes à wp_localize_script() qui nous permet de transmettre un objet JavaScript à notre fichier JS. Cela nous donnera accès à ajax_object.ajax_url, qui nous servira pour les appels Ajax.

Création de la Fonction d’Ajax

Dans votre page_handler.php, définissez une fonction qui traitera les requêtes Ajax. Supposons que nous voulons récupérer une liste de tâches :

“`php
function my_custom_json() {
// Vous pouvez récupérer des données depuis la base de données ici
global $wpdb;

// Par exemple, récupérons une liste de tâches
$tasks = $wpdb->get_results("SELECT * FROM wp_tasks_table", ARRAY_A);

// Formatez les données pour DataTable
$data = [];
foreach ($tasks as $task) {
    $data[] = [
        $task['id'],
        $task['task_name'],
        $task['status'],
        // D'autres colonnes si nécessaire
    ];
}

// Répondez avec les données au format JSON
wp_send_json_success($data);

}
add_action(‘wp_ajax_tasklist_dt’, ‘my_custom_json’);
add_action(‘wp_ajax_nopriv_tasklist_dt’, ‘my_custom_json’); // Si vous souhaitez que cela soit accessible aux visiteurs non connectés
“`

Explication : Cette fonction fait partie du CRUD. Elle récupère les données de la base de données et les formate en un tableau que DataTables pourra traiter. Ensuite, elle utilise wp_send_json_success pour envoyer ces données sous forme de JSON.

Configuration de DataTable avec Ajax

Maintenant, dans votre cdt.js, vous pouvez appeler votre fonction Ajax en utilisant l’URL que nous avons définie :

javascript
jQuery(document).ready(function() {
var tasklist_table = jQuery('#tasklist_table').DataTable({
"lengthChange": false,
"autoWidth": false,
"searching": true,
"ordering": false,
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
url: ajax_object.ajax_url + '?action=tasklist_dt',
type: 'POST'
},
"columnDefs": [
{
"targets": [0],
"orderable": false,
},
],
});
});

Points Clés :
– ajax_object.ajax_url vous permet d’appeler admin-ajax.php sans coder l’URL. C’est une bonne pratique car cela garantira que votre code fonctionne sur différents environnements WordPress.
– Le paramètre action dans l’URL est crucial, car c’est ce qui associe votre requête Ajax à la fonction que vous avez définie dans le serveur.

Mise en Place de l’HTML

Assurez-vous également que l’HTML pour votre tableau est en place dans le fichier page_handler.php :

“`html

“`

Résolution de Problèmes Courants

Problèmes de CORS

Si vous rencontrez des problèmes avec les erreurs de CORS, assurez-vous que votre site est configuré pour accepter les requêtes de votre domaine.

Consolidez Vos Codes JS

Gardez à l’esprit d’utiliser la console de votre navigateur pour vérifier si des erreurs sont affichées lors du chargement du DataTable. Cela peut vous donner un indice sur ce qui pourrait mal se passer.

Test avec des Statuts HTTP

Vérifiez que votre réponse Ajax retourne un statut HTTP 200. Si la réponse est autrement, cela pourrait indiquer que quelque chose a mal fonctionné lors de l’exécution de votre fonction PHP.

Conclusion

En utilisant Ajax DataTable au sein de votre plugin WordPress, vous avez la capacité d’améliorer l’interactivité et l’expérience utilisateur de votre site ou application. En suivant les étapes décrites ci-dessus, vous pouvez facilement configurer un tableau dynamique qui récupère des données de manière fluide. Que ce soit pour afficher des messages, des commandes, ou d’autres types de données, l’intégration d’Ajax avec DataTable est un choix judicieux pour structurer ces informations de manière efficace. N’hésitez pas à customiser encore plus votre tableau avec d’autres fonctionnalités DataTables pour offrir une expérience utilisateur encore plus agréable !