0

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.

enter image description here

  • 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.

  • Have you checked the docs? – Sally CJ Mar 12 at 8:12
  • 1
    Yes, @SallyCJ and I already solve my problem. thanks. – Rhalp Darren Cabrera Mar 12 at 16:15
  • Alright, but I suggest you to post your solution as an answer. (show the relevant code) It's not a requirement, but if you want to keep the question, then sharing a solution is better and could save someone's time in the future. – Sally CJ Mar 13 at 1:34
  • 1
    Sure, No Problem. @SallyCJ – Rhalp Darren Cabrera Mar 13 at 22:31
0

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');
  1. 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' ); 
}

  1. 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:

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.