Cómo usar DataTable con Ajax en WordPress

Si estás buscando integrar DataTables con WordPress y utilizar AJAX, estás en el lugar correcto. En esta guía, te mostraremos cómo usar DataTable con Ajax al crear un plugin en WordPress.

Paso 1: Enqueue de archivos JavaScript

Para comenzar, necesitarás encolar tus archivos JavaScript personalizados. En el archivo index.php de tu plugin, puedes utilizar la función wp_register_script para registrar tu archivo JavaScript y la función wp_enqueue_script para encolarlo. Asegúrate de incluir el archivo de DataTables y jQuery como dependencias. Aquí tienes un ejemplo de cómo hacerlo:

function script_enqueue() {
    wp_register_script("dt_csc", plugin_dir_url(__FILE__). 'js/cdt.js', array('jquery'));
    wp_localize_script('dt_csc', 'myAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
    wp_enqueue_script('jquery');
    wp_enqueue_script('dt_csc');
}
add_action('init', 'script_enqueue');

Paso 2: Configurar la función AJAX

A continuación, necesitarás configurar la función que manejará la solicitud de AJAX. En el archivo index.php, puedes definir una función personalizada que generará los datos JSON para DataTables. Aquí tienes un ejemplo:

if (!function_exists('client_json')) {
    function client_json() {
        global $wpdb;
        include_once plugin_dir_path(__FILE__) . '/datatables/client.php';
        wp_die();
    }
    add_action('wp_ajax_client_json', 'client_json');
    add_action('wp_ajax_nopriv_client_json', 'client_json');
}

Paso 3: Inicializar DataTables con Ajax

Finalmente, en tu archivo cdt.js, puedes inicializar DataTables con la configuración adecuada para utilizar AJAX. Asegúrate de establecer la URL de AJAX como “admin-ajax.php” y proporcionar los datos necesarios para la solicitud de AJAX. Aquí tienes un ejemplo:

var client_table = jQuery('#client_table').DataTable({
   "lengthChange": false,
   "autoWidth": false,
   "searching": true,
   "ordering": false,
   "processing": true,
   "serverSide": true,
   "order": [],
   "ajax": {
     url: "admin-ajax.php",
     data: {
       action: "client_json"
     },
     type: "POST"
   },
   "columnDefs": [{
     "targets": [0],
     "orderable": false,
   }],
});

Conclusiones

Ahora que conoces los pasos necesarios para utilizar DataTable con Ajax en tu plugin de WordPress, podrás crear tablas interactivas y dinámicas en tus sitios web. Mediante la combinación de DataTables y Ajax, podrás cargar los datos de la tabla de forma asíncrona, lo que mejorará la experiencia del usuario y aumentará la eficiencia de tu sitio.

Sigue explorando las posibilidades de DataTables y considera personalizar aún más la integración con tu plugin de WordPress. Recuerda que puedes agregar filtros, paginación y muchas otras funcionalidades a tus tablas. ¡Diviértete creando aplicaciones web increíbles!