How to use Datatable with Ajax when creating plugin on WordPress?

Question

Hello i wanted to make a plugin with DataTable integration but i have a problem on calling ajax in url. this is my plugin directory look like.

• in index.php i use admin_enqueue_scripts for datatable CDN.
• page_handler.php handle page html.
• cdt.js where my customize js & jquery.

usually in DataTable if we don't use WordPress, u can use url:"datatables/tasklist.php" to call the custom php file with json encoded data but in WordPress you must use admin-ajax.php?action=my_custom_json in order to call ajax.

cdt.js

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:"admin-ajax.php?action=tasklist_dt",
         type:"POST"
       },
       "columnDefs":[
         {
           "targets":[0],
           "orderable":false,
         },
       ],
    });

});

I hope someone will help me on how to properly call the seperated php file when using ajax.

Answer 1

Solution to my own problem:

1. Enqueue your custom file.js and localize admin-ajax.php.

index.php

    function script_enqueue() {

        // Register the JS file with a unique handle, file location, and an array of dependencies
        wp_register_script("dt_csc", plugin_dir_url(__FILE__).
            'js/cdt.js', array('jquery'));

        // localize the script to your domain name, so that you can reference the url to admin-ajax.php file easily
        wp_localize_script('dt_csc', 'myAjax', array('ajaxurl' => admin_url('admin-ajax.php')));

        // enqueue jQuery library and the script you registered above
        wp_enqueue_script('jquery');
        wp_enqueue_script('dt_csc');
    }
    add_action('init', 'script_enqueue');

2. Create a function example:

index.php

if ( !function_exists( 'client_json' ) ) {

    function client_json() {
        //global object to perform database operation
        global $wpdb;
        //include the php file responsible for generating json for datatable 
        include_once plugin_dir_path( __FILE__ ) . '/datatables/client.php';
        // Kills WordPress execution  
        wp_die();
    }
    // wp_ajax is a authenticated Ajax
    add_action('wp_ajax_client_json', 'client_json' ); 
    //wp_ajax_nopriv is a non-authenticated Ajax
    add_action('wp_ajax_nopriv_client_json', 'client_json' ); 
}

3. Then on your Ajax URL use "admin-ajax.php" to call the function where your JSON is generated, {action:"**function_name**",extra_param:"extra_value"}

cdt.js

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,
         },
       ],
});

TAGS: wordpressjsonphppluginajaxplugin-developmentdatatables