Datatable не загружается при использовании load () и обновляет содержимое datatable в div

Question

Я создал своего рода информационную панель, которая загружает контент с другой страницы по щелчку с определенным c идентификатором div, это отлично работает и загружает необходимый div с другой страницы. Проблема в том, что он не работает на странице, где я добавил шорткод Datatable [subscriber_datatables]. при первом щелчке по ссылке .sidebarlink таблица отображается, но пуста, второй щелчок показывает, что контент есть, он загружается, а затем скрывается.

Видео проблемы: https://gofile.io/d/Rh0A2K

единственный способ, которым это работает с таблицей, если я изменю это:

$('#bla-load-content').load(this.href + " #bla-content-area");

на это

$('#bla-load-content').load(this.href);

, но затем он загружает всю страницу со всеми частями, такими как боковая панель и другие ненужные div. Я не уверен, что то, что я пытаюсь достичь, слишком сложно или что-то не так с кодом.

кстати, datatable будет отображаться, как ожидалось, если я сделаю обновление страницы руководства sh

по триггеру клика

    // Load content with specific div ID
    $('.site-main').on("click",".sidebarlink",function(e){ 
        e.preventDefault(); // cancel click
        
        // on click Load div with id #bla-content-area from another page
        $('#bla-overlay').fadeIn().delay(800).fadeOut();
        $('#bla-menu-title').load(this.href + " #bla-title");
        $('#bla-load-content').load(this.href + " #bla-content-area");


        // tested to reload the table but not working
        //$("#subscribertable").DataTable().ajax.reload();
 
        // tested this as well it's no reloading
        //var table = $('#subscribertable').DataTable();
        //table.ajax_url.reload();

        // this is showing the table but hiding it later
        $('#subscribertable').DataTable({
        "retrieve": true,
        "processing": true,
        "serverSide": true,
        "ajax": ajax_url
        });

    
    });

шорткод и код функции, которые я использую

<?php
/**
 * lubuvna Custom Plugin Options and Fields
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package lubuvna
 */


// Add Post title to custom meta 
add_action( 'transition_post_status', 'duplicate_title_subscriber', 10, 3 ); 
 
function duplicate_title_subscriber( $new, $old, $post ) { 
    if ( $post->post_type == 'lubuvna_subscriber' ) { 
        update_post_meta( $post->ID, 'd_title', $post->post_title ); 
    } 
}



// Add DataTables Resources
  
function add_datatables_scripts_subscriber() {
wp_register_script('datatables', 'https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js', array('jquery'), true);
wp_enqueue_script('datatables');
  
wp_register_script('datatables_bootstrap', 'https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js', array('jquery'), true);
wp_enqueue_script('datatables_bootstrap');
    
wp_register_script('datatables_responsive', 'https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js', array('jquery'), true);
wp_enqueue_script('datatables_responsive');

wp_register_script('datatables_responsive_bootstrap', 'https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js', array('jquery'), true);
wp_enqueue_script('datatables_responsive_bootstrap');
}
  
function add_datatables_style_subscriber() {
wp_register_style('lubuvna-datatable-bootstrap_style', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
wp_enqueue_style('lubuvna-datatable-bootstrap_style');

wp_register_style('lubuvna-datatables_bootstrap_style', 'https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css');
wp_enqueue_style('lubuvna-datatables_bootstrap_style');
    
wp_register_style('lubuvna-datatables_style_responsive_bootstrap', 'https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css');
wp_enqueue_style('lubuvna-datatables_style_responsive_bootstrap');
}
  
add_action('wp_enqueue_scripts', 'add_datatables_scripts_subscriber');
add_action('wp_enqueue_scripts', 'add_datatables_style_subscriber');



/*
// subscriber datatables Javascript
function subscriber_datatables_scripts() {
wp_enqueue_script( 'subscriber_datatables', get_stylesheet_directory_uri(). '/subscribertable.js', array(), '1.0', true );
wp_localize_script( 'subscriber_datatables', 'ajax_url', admin_url('admin-ajax.php?action=subscriber_datatables') );
}
*/

// to use ajaxurl directly, in your plugin file add this
add_action('wp_head', 'subscriber_datatables_scripts');
function subscriber_datatables_scripts() {

   echo '<script type="text/javascript">
           var ajax_url = "' . admin_url('admin-ajax.php?action=subscriber_datatables') . '";
         </script>';
}


// subscriber Datatables shortcode [subscriber_datatables]
function subscriber_datatables() {
     
    subscriber_datatables_scripts(); 
     
    ob_start(); ?> 
    <table id="subscribertable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%"> 
        <thead>
            <tr>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
    </table> 
         
    <?php 
    return ob_get_clean(); 
}
 
add_shortcode ('subscriber_datatables', 'subscriber_datatables');



// setting up the callback function
add_action('wp_ajax_subscriber_datatables', 'datatables_server_side_callback_subscriber');
add_action('wp_ajax_nopriv_subscriber_datatables', 'datatables_server_side_callback_subscriber');
 
 
function datatables_server_side_callback_subscriber() {
 
    header("Content-Type: application/json");
 
    $request= $_GET;
 
    $columns = array(
        0   => 'post_title',
        1   => 'lbu_first_name',
        2   => 'lbu_last_name',
        3   => 'lbu_email',
        4   => 'lbu_phone'
        
    );
 
 
    $args = array(
        'post_type' => 'lubuvna_subscriber',
        'post_status' => 'publish',
        'posts_per_page' => $request['length'],
        'offset' => $request['start'],
        'order' => $request['order'][0]['dir'],
    );
 
    if ($request['order'][0]['column'] == 0) {
 
        $args['orderby'] = $columns[$request['order'][0]['column']];
 
    } elseif ($request['order'][0]['column'] == 1 || $request['order'][0]['column'] == 2) {
 
        $args['orderby'] = 'meta_value_num';
 
        $args['meta_key'] = $columns[$request['order'][0]['column']];
    }
 
    //$request['search']['value'] <= Value from search
 
    if( !empty($request['search']['value']) ) { // When datatables search is used
        $args['meta_query'] = array(
            'relation' => 'OR',
            array(
                'key' => 'd_title',
                'value' => sanitize_text_field($request['search']['value']),
                'compare' => 'LIKE'
            ),
            array(
                'key' => 'lbu_first_name',
                'value' => sanitize_text_field($request['search']['value']),
                'compare' => 'LIKE'
            ),
            array(
                'key' => 'lbu_last_name',
                'value' => sanitize_text_field($request['search']['value']),
                'compare' => 'LIKE'
            ),
            array(
                'key' => 'lbu_email',
                'value' => sanitize_text_field($request['search']['value']),
                'compare' => 'LIKE'
            ),
            array(
                'key' => 'lbu_phone',
                'value' => sanitize_text_field($request['search']['value']),
                'compare' => 'LIKE'
            ),
        );
    }
        
    $subscriber_query = new WP_Query($args);
    $totalData = $subscriber_query->found_posts;
 
    if ( $subscriber_query->have_posts() ) {
         
        while ( $subscriber_query->have_posts() ) {
         
            $subscriber_query->the_post();
 
            $nestedData = array();
            $nestedData[] = get_the_title();
            $nestedData[] = get_field('lbu_first_name');
            $nestedData[] = get_field('lbu_last_name');
            $nestedData[] = get_field('lbu_email');
            $nestedData[] = get_field('lbu_phone');
 
            $data[] = $nestedData;
 
        }
 
        wp_reset_query();
 
        $json_data = array(
            "draw" => intval($request['draw']),
            "recordsTotal" => intval($totalData),
            "recordsFiltered" => intval($totalData),
            "data" => $data
        );
 
        echo json_encode($json_data);
 
    } else {
 
        $json_data = array(
            "data" => array()
        );
 
        echo json_encode($json_data);
    }
     
    wp_die();
 
}

подписку. js файл

jQuery(document).ready(function($) {

    $(document).ready(function() {
      
    $('#subscribertable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": ajax_url
    });
      
    });

});

Когда выполняется ручное обновление sh, я могу видеть ajax администратора * вызов

When .sidebarlink clicked no admin-ajax call Когда .sidebarlink не нажимался, администратор - ajax не звонил