double table html on ajax pagination request – wordpress

Dear WordPress Developer,

Hello, I want to ask something.

Actually, the code is running. But I don’t understand why when click ajax pagination, there is 0 value appear. And when I check on developer tools, the ajax pagination resulting 2 div id="data" and that make 0 value appear. Here is the image:

I don’t know where the code gone wrong. Please take a look at my code:

display-cpt.php

class displayCPT{

    static function displayAllUniversity(){
        global $wpdb;

        $page = (isset($_GET['page'])) ? $_GET['page'] : 1;
        $limit = 3;
        $limit_start = ($page - 1) * $limit;
        $no = $limit_start + 1;

        $table_name = $wpdb->prefix . 'posts';
        $allUniversity = new WP_QUERY(array(
            'post_type' => 'university',
            'post_status' => 'publish',
            'orderby' => 'post_date',
            'order' => 'ASC',
            'posts_per_page' => $limit,
            'offset' => $limit_start
        ));

        $total_records = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_type = 'university' AND post_status = 'publish'", array() ));

        if($allUniversity->have_posts()){
            ?>
            <div id="data">
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width: 50%">
                                <h2><strong>Nama Universitas</strong></h2>
                            </th>
                            <th>
                                <h2><strong>Lokasi Universitas</strong></h2>
                            </th>
                            <th>
                                <h2><strong>Jurusan Tersedia</strong></h2>
                            </th>
                            <th>
                                <h2><strong>Beasiswa Tersedia</strong></h2>
                            </th>
                        </tr>
                    </thead>
                    <?php
                    while($allUniversity->have_posts()){
                        $allUniversity->the_post();
                        ?>
                        <tbody>
                            <tr>
                                <td data-label="Nama Universitas">
                                    <?php 
                                        $university_logo = get_field('university_logo');
                                        $size = 'medium';
                                        if( ! empty ( $university_logo ) ) {
                                            echo wp_get_attachment_image($university_logo, $size, "", array( "class" => "img-responsive" ));
                                        }
                                    ?>
                                    <p style="font-size: x-large;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3></p>
                                    <details>
                                        <summary>lihat detail &raquo;</summary>
                                        <p><?php echo wp_trim_words(get_the_content(), 15); ?><a href="<?php the_permalink(); ?>"> Baca Selengkapnya &raquo;</a></p>
                                    </details>
                                </td>
                                <td data-label="Lokasi Universitas">
                                    <p><?php $university_locations = the_field('university_location'); ?></p>
                                </td>
                                <td data-label="Jurusan Tersedia">
                                    <p><?php $university_majors = the_field('university_major'); ?></p>
                                </td>
                                <td data-label="Beasiswa Tersedia">
                                    <?php 
                                    
                                    $university_scholarships = get_field('university_scholarship');
                                    
                                    if(count((array)$university_scholarships) > 0):
                                    ?>
                                        <p><a href="<?php the_permalink(); ?>"><?php echo count($university_scholarships); ?> Beasiswa</a></p>
                                    <?php else: ?>
                                        <p><a href="<?php the_permalink(); ?>">0 Beasiswa</a></p>
                                    <?php endif; ?>
                                </td>
                            </tr>
                                                
                        </tbody>
                        <?php 
                    }
                    ?>
                </table>

                <p>Total baris : <?php echo $total_records; ?></p>

                <nav class="mb-5">
                    <ul class="pagination justify-content-end">

                    <?php 
                        $jumlah_page = ceil($total_records / $limit);
                        $jumlah_number = 1; //jumlah halaman ke kanan dan kiri dari halaman yang aktif
                        $start_number = ($page > $jumlah_number)? $page - $jumlah_number : 1;
                        $end_number = ($page < ($jumlah_page - $jumlah_number))? $page + $jumlah_number : $jumlah_page;
                        if($page == 1){
                            echo '<li class="page-item disabled"><a class="page-link">First</a></li>';
                            echo '<li class="page-item disabled"><a class="page-link"><span aria-hidden="true">&laquo;</span></a></li>';
                        } else {
                        $link_prev = ($page > 1)? $page - 1 : 1;
                            echo '<li class="page-item halaman" id="1"><a class="page-link">First</a></li>';
                            echo '<li class="page-item halaman" id="'.$link_prev.'"><a class="page-link"><span aria-hidden="true">&laquo;</span></a></li>';
                        }
                        for($i = $start_number; $i <= $end_number; $i++){
                            $link_active = ($page == $i)? ' active' : '';
                            echo '<li class="page-item halaman '.$link_active.'" id="'.$i.'"><a class="page-link">'.$i.'</a></li>';
                        }
                        if($page == $jumlah_page){
                            echo '<li class="page-item disabled"><a class="page-link"><span aria-hidden="true">&raquo;</span></a></li>';
                            echo '<li class="page-item disabled"><a class="page-link">Last</a></li>';
                        } else {
                        $link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page;
                            echo '<li class="page-item halaman" id="'.$link_next.'"><a class="page-link"><span aria-hidden="true">&raquo;</span></a></li>';
                            echo '<li class="page-item halaman" id="'.$jumlah_page.'"><a class="page-link">Last</a></li>';
                        }

                        ?>

                    </ul>


                </nav>
            </div>
            <?php

            wp_reset_postdata();
        }
    }
}

and this is ajax-pagination.js

import $ from "jquery";

class ajaxPagination{
    constructor(){
        this.events();
    }

    events(){
        $(document).ready(function(){
            $(document).on('click', '.halaman', function(e){
                e.preventDefault();
                var page = $(this).attr("id");
                $.ajax({
                    url: pluginData.ajax_url,
                    type: 'GET',
                    data:{
                      'action': 'displayAllUniversity',
                      'page': page
                    },
                    success: function(response) {
                        $('#data').html(response);
                       
                    }
                  
               })
            });

        });
    }


}

export default ajaxPagination;

and then this is inside posts-type.php

class postsType{

    function __construct(){
        add_action( 'init', array('registerCPT', 'register_menu_page'));
        
        add_shortcode('displayAllUniversity', array('displayCPT', 'displayAllUniversity'));

        add_action( 'wp_ajax_displayAllUniversity', array('displayCPT','displayAllUniversity') );

        add_action( 'wp_ajax_nopriv_displayAllUniversity', array('displayCPT','displayAllUniversity')); 


    }

}

$PostsType = new postsType;

and this is inside functions.php

function plugin_assets(){
    wp_enqueue_script("enqueue_plugin_scripts", POSTS_TYPE_URL . 'build/index.js', array('jquery'), '1.0', true);
    wp_enqueue_style("enqueue_plugin_style", POSTS_TYPE_URL . 'build/style-index.css');
    wp_enqueue_style('dashicons');

    wp_enqueue_style( 'boostrap', '//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

    wp_localize_script('enqueue_plugin_scripts', 'pluginData', array(
        'ajax_url' =>  admin_url( "admin-ajax.php" )
    ));

}

add_action('wp_enqueue_scripts', 'plugin_assets');

this is inside register-cpt.php

static function register_menu_page(){
        if(is_plugin_active('posts-type/posts-type.php')){
            register_post_type('university', array(
                'show_in_rest' => true,
                'supports' => array('title', 'editor', 'thumbnail'),
                'has_archieve' => true,
                'public' => true,
                'labels' => array(
                    'name' => 'University',
                    'add_new_item' => 'Add New University',
                    'edit_item' => 'Edit University',
                    'all_item' => 'All University',
                    'singular_name' => 'University'
                ),
                'menu_icon' => 'dashicons-building'
            ));
        }

    }

any help is much appreciated, thank you!

Best Regards,

Hendra

UPDATED CODE

I’m deleted and give it to table. The double table already fixed, but still get "0" below. And then I follow @vel directions to use $('.entry-content').empty().html(response); on my ajax success.

Here is the code:

 static function displayAllUniversity(){
        global $wpdb;

        $page = (isset($_GET['page'])) ? $_GET['page'] : 1;
        $limit = 3;
        $limit_start = ($page - 1) * $limit;
        $no = $limit_start + 1;

        $table_name = $wpdb->prefix . 'posts';
        $allUniversity = new WP_QUERY(array(
            'post_type' => 'university',
            'post_status' => 'publish',
            'orderby' => 'post_date',
            'order' => 'ASC',
            'posts_per_page' => $limit,
            'offset' => $limit_start
        ));

        $total_records = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_type = 'university' AND post_status = 'publish'", array() ));

        if($allUniversity->have_posts()){
            ?>
                <table class="table" id="data">
                    <thead>
                        <tr>
                            <th style="width: 50%">
                                <h2><strong>Nama Universitas</strong></h2>
                            </th>
                            <th>
                                <h2><strong>Lokasi Universitas</strong></h2>
                            </th>
                            <th>
                                <h2><strong>Jurusan Tersedia</strong></h2>
                            </th>
                            <th>
                                <h2><strong>Beasiswa Tersedia</strong></h2>
                            </th>
                        </tr>
                    </thead>
                    <?php
                    while($allUniversity->have_posts()){
                        $allUniversity->the_post();
                        ?>
                        <tbody>
                            <tr>
                                <td data-label="Nama Universitas">
                                    <?php 
                                        $university_logo = get_field('university_logo');
                                        $size = 'medium';
                                        if( ! empty ( $university_logo ) ) {
                                            echo wp_get_attachment_image($university_logo, $size, "", array( "class" => "img-responsive" ));
                                        }
                                    ?>
                                    <p style="font-size: x-large;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3></p>
                                    <details>
                                        <summary>lihat detail &raquo;</summary>
                                        <p><?php echo wp_trim_words(get_the_content(), 15); ?><a href="<?php the_permalink(); ?>"> Baca Selengkapnya &raquo;</a></p>
                                    </details>
                                </td>
                                <td data-label="Lokasi Universitas">
                                    <p><?php $university_locations = the_field('university_location'); ?></p>
                                </td>
                                <td data-label="Jurusan Tersedia">
                                    <p><?php $university_majors = the_field('university_major'); ?></p>
                                </td>
                                <td data-label="Beasiswa Tersedia">
                                    <?php 
                                    
                                    $university_scholarships = get_field('university_scholarship');
                                    
                                    if(count((array)$university_scholarships) > 0):
                                    ?>
                                        <p><a href="<?php the_permalink(); ?>"><?php echo count($university_scholarships); ?> Beasiswa</a></p>
                                    <?php else: ?>
                                        <p><a href="<?php the_permalink(); ?>">0 Beasiswa</a></p>
                                    <?php endif; ?>
                                </td>
                            </tr>
                                                
                        </tbody>
                        <?php 
                    }
                    ?>
                </table>

                <p>Total baris : <?php echo $total_records; ?></p>

                <nav class="mb-5">
                    <ul class="pagination justify-content-end">

                    <?php 
                        $jumlah_page = ceil($total_records / $limit);
                        $jumlah_number = 1; //jumlah halaman ke kanan dan kiri dari halaman yang aktif
                        $start_number = ($page > $jumlah_number)? $page - $jumlah_number : 1;
                        $end_number = ($page < ($jumlah_page - $jumlah_number))? $page + $jumlah_number : $jumlah_page;
                        if($page == 1){
                            echo '<li class="page-item disabled"><a class="page-link">First</a></li>';
                            echo '<li class="page-item disabled"><a class="page-link"><span aria-hidden="true">&laquo;</span></a></li>';
                        } else {
                        $link_prev = ($page > 1)? $page - 1 : 1;
                            echo '<li class="page-item halaman" id="1"><a class="page-link">First</a></li>';
                            echo '<li class="page-item halaman" id="'.$link_prev.'"><a class="page-link"><span aria-hidden="true">&laquo;</span></a></li>';
                        }
                        for($i = $start_number; $i <= $end_number; $i++){
                            $link_active = ($page == $i)? ' active' : '';
                            echo '<li class="page-item halaman '.$link_active.'" id="'.$i.'"><a class="page-link">'.$i.'</a></li>';
                        }
                        if($page == $jumlah_page){
                            echo '<li class="page-item disabled"><a class="page-link"><span aria-hidden="true">&raquo;</span></a></li>';
                            echo '<li class="page-item disabled"><a class="page-link">Last</a></li>';
                        } else {
                        $link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page;
                            echo '<li class="page-item halaman" id="'.$link_next.'"><a class="page-link"><span aria-hidden="true">&raquo;</span></a></li>';
                            echo '<li class="page-item halaman" id="'.$jumlah_page.'"><a class="page-link">Last</a></li>';
                        }

                        ?>

                    </ul>


                </nav>
  
            <?php

            wp_reset_postdata();
            
        }

    }