I have pagination using ajax JQuery. And the web I’m using is WordPress.
The pagination is working, but what I want is, when user click the pagination, the page is set up.
I think giving example, will be way more understandable.
For example, I have url:
http://localhost/edupac-id/university/
the page have pagination ajax.
So, when user click the pagination, the url changed to like this:
http://localhost/edupac-id/university/?page=2
But when I enter this url in browser search bar:
http://localhost/edupac-id/university/?page=2
the url come back into this url:
http://localhost/edupac-id/university/
All I want is, when I enter the: http://localhost/edupac-id/university/?page=2 in browser search bar, the result list still the page 2, not go back again (reset).
Here is my display-university.php file:
<?php
class edu003_displayUniversityCPT{
static function displayAllUniversity(){
global $wpdb;
$page = (isset($_POST['page'])) ? $_POST['page'] : 1;
$limit = 5;
$limit_start = ($page - 1) * $limit;
$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="u-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>
</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 »</summary>
<p><?php echo wp_trim_words(get_the_content(), 15); ?><a href="<?php the_permalink(); ?>"> Baca Selengkapnya »</a></p>
</details>
</td>
<td data-label="Lokasi Universitas">
<?php
$university_locations = get_field('university_location');
if(count((array)$university_locations) > 1){
foreach($university_locations as $university_location){
?>
<ul>
<li><a href="<?php echo site_url('kuliah-di-' . strtolower($university_location)); ?>"><?php echo $university_location; ?></a></li>
</ul>
<?php
}
}
else{
?>
<p><a href="<?php echo site_url('kuliah-di-' . strtolower(implode("", $university_locations))); ?>"><?php echo implode("", $university_locations) ?></a></p>
<?php
}
?>
</td>
<td data-label="Jurusan Tersedia">
<?php if(count((array) get_field('university_majors')) > 0): ?>
<p><a href="<?php the_permalink(); ?>"><?php echo count(get_field('university_majors')); ?> Jurusan</a></p>
<?php else: ?>
<p><a href="<?php the_permalink(); ?>">0 Jurusan</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;
$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">«</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">«</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" href="' . get_site_url() . '/university/?page='.$i.'">'.$i.'</a></li>';
}
if($page == $jumlah_page){
echo '<li class="page-item disabled"><a class="page-link"><span aria-hidden="true">»</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">»</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();
}
}
}
?>
and here is my ajax-pagination.js file:
import $ from "jquery";
class edu003_ajaxPagination{
constructor(){
this.events();
}
events(){
$(document).on('click', '.halaman', function(e){
e.preventDefault();
var page = $(this).attr("id");
$.ajax({
url: pluginData.ajax_url,
type: 'POST',
data:{
'action': 'displayAllUniversity',
'page': page
},
success: function(response) {
history.pushState(page, '', '?page='+page);
$('html, body').animate({ scrollTop: $('.entry-content').offset().top-70 }, 'fast');
response = response.trim();
response = response.slice(0, -1);
$('.entry-content').empty().html(response);
}
})
});
}
}
export default edu003_ajaxPagination;
Thank you in advance, developers.
