Home > database >  How to set an ajax url in wordpress? I want to call it with datatables.net in server side processing
How to set an ajax url in wordpress? I want to call it with datatables.net in server side processing

Time:02-23

I want to set up an ajax url to use it with Datatables in wordpress. But I don't know how I would set up the corresponding url in wordpress. I guess its a rather easy task but don't know how to do it.

I found example code how to set up datatables server side processing in wordpress but I am struggling to put the following code in real life (how to create the corresponding FrontendConfig.ajaxurl in Wordpress? Or would it be better to create a wordpress json endpoint?)

jQuery

jQuery('#student_table').DataTable({
    "bProcessing": true,
    "serverSide": true,
    "ajax":{
        "url": FrontendConfig.ajaxurl '?action=getStudentsFromExamIdAjax&exam_nounce=exam_nounce_data&exam_id=1',
        type: "post",
    }
});  

Wordpress php

add_action('wp_ajax_getStudentsFromExamIdAjax', 'getStudentsFromExamIdAjax' );
add_action('wp_ajax_nopriv_getStudentsFromExamIdAjax', 'getStudentsFromExamIdAjax' );

function getStudentsFromExamIdAjax(){
    if(empty($_GET['action']) || empty($_GET['exam_id'])){
        wp_send_json_error( new \WP_Error( 'Bad Request' ) );
    }

    if(isset($_GET['exam_id']) && $_SERVER['REQUEST_METHOD'] === 'POST' && wp_verify_nonce( $_GET['exam_nounce'], 'exam_nounce_data' )):

        $exam_id = (isset($_GET['exam_id'])) ? absint($_GET['exam_id']) : '';

        /*@ You can create a function to get the data here */
        $students = getStudentsFromExamId($exam_id);

        $tdata = [];
        foreach ($students as $key => $value):
            $tdata[$key][] = $value->roll_no;
            $tdata[$key][] = $value->name;
            $tdata[$key][] = $value->phone;
            $tdata[$key][] = 'action here';
        endforeach;

        $total_records = count($tdata);

        $json_data = array(

            /* $_REQUEST['draw'] comes from the datatable, you can print to ensure that */

            "draw"            => intval( $_REQUEST['draw'] ), 
            "recordsTotal"    => intval( $total_records ),
            "recordsFiltered" => intval( $total_records  ),
            "data"            => $tdata
        );

        echo json_encode($json_data);
    endif;

    wp_die();
}

CodePudding user response:

You just need to set the following enqueue_style_and_scripts into your function.php file. You need to set wp_localize_script, check this link https://developer.wordpress.org/reference/functions/wp_localize_script/. Don't forget to change the code as per your coding requirement.

  /*@ Enqueue styles & scripts */
    if( !function_exists('enqueue_style_and_scripts') ):
    
        function enqueue_style_and_scripts(){
    
            $version = wp_get_theme()->get('Version');
    
            wp_enqueue_script(
                'general_js',
                get_stylesheet_directory_uri() . '/assets/js/general.js',
                array('jquery'),
                $version,
                true
            );
    
            $frontendconfig = array(
                'ajaxurl' => admin_url( 'admin-ajax.php' ),
                'is_user_logged_in' => is_user_logged_in(),
            );
            wp_localize_script( 'general_js', 'FrontendConfig', $frontendconfig );
    
        }
        add_action('wp_enqueue_scripts', 'enqueue_style_and_scripts');
    
    endif;
  • Related