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

admin管理员组

文章数量:1391929

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.

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.

• plugins
• php
• plugin-development
• ajax

Share Improve this question asked Mar 11, 2020 at 18:49 Rhalp Darren CabreraRhalp Darren Cabrera 11311 silver badge66 bronze badges 4

• Have you checked the docs? – Sally CJ Commented Mar 12, 2020 at 8:12
• 1 Yes, @SallyCJ and I already solve my problem. thanks. – Rhalp Darren Cabrera Commented Mar 12, 2020 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 Commented Mar 13, 2020 at 1:34
• 1 Sure, No Problem. @SallyCJ – Rhalp Darren Cabrera Commented Mar 13, 2020 at 22:31

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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');

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

本文标签： phpHow to use Datatable with Ajax when creating plugin on WordPress