[Closed] Replace Pagination number to Show More Button instead

[Author]

Posts

[adamD-12]

I am trying to replace the default pagination instead of number, I want to add Button "Show More". Once the button click, show up more items.

This is my Loop code:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->

<div class="container text-center">
<div class="row doctor-wrap justify-content-md-center">

<wpv-loop>
<div class="col-lg-4 col-md-6">
<div class="doctor-container">

<div class="doctor-img">[wpv-post-featured-image size="large"]</div>

<div class="doctor-info">
<div class="doctor-name">[wpv-post-title]</div>
<div class="doctor-profession">[types field='profession'][/types]</div>
<div class="molescan-divider"></div>
</div>

<!-- Modal -->
<div id="my-modal-[wpv-post-id]" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">[wpv-post-title]</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">[types field='doctor-booking-shortcode'][/types]</div>
</div>
</div>
</div>
</div>
</div>

<div class="button-doc-info">
<div class="button-book">
Book Now
</div>
<div class="button-more">
Learn More
</div>
</div>

</div>
</div>
</wpv-loop>

</div> <!-- end row -->
</div> <!-- end container -->

<!-- wpv-loop-end -->

<!-- REQUIRED FOR LOAD MORE TO WORK -->
[wpv-pagination type="ajax" spinner="fade"]

[/wpv-items-found]

[wpv-no-items-found]
<strong style="text-align: center; display: block;">[wpml-string context="wpv-views"]No Doctor found[/wpml-string]
[/wpv-no-items-found]

<!-- CUSTOM LOAD MORE BUTTON -->
<button id="load-more" class="toolset-load-more">Show More</button>

[wpv-layout-end]

This is my CSS:

.wpv-pagination-nav-links { display: none; }

This is my JS:
jQuery(function ($) {

$('#load-more').on('click', function (e) {
e.preventDefault();

// Trigger AJAX "next page" on the actual wrapper
$('#js-wpv-view-layout-1156').trigger('js_wpv_ajax_pagination_request', {
direction: 'next'
});
});

// Hide button when no more pages
$(document).on('js_event_wpv_pagination_completed', function (event, data) {
if (data.view_current_page >= data.view_max_pages) {
$('#load-more').hide();
}
});

});

But my codes doesn't work. Any help what missing?

I work on this page:
hidden link

Working on the Views name: McIntyre Doctors

Hopefully you will find the solutions

[Christopher Amirian]

Hi,

Welcome to Toolset support.

Delving into details of a custom JavaScript code is outside of our support scope.

But from what I understand, you just need the infinite scroll feature, which Toolset already has.

In the View → Pagination

Enable AJAX and Infinite scrolling.

In Loop Editor, between [/wpv-items-found] and [/wpv-no-items-found] add:

[/wpv-items-found]
[wpv-pager-next-page force="true"]
  [wpml-string context="wpv-views"]Show More[/wpml-string]
[/wpv-pager-next-page]
[wpv-no-items-found]
``` :contentReference[oaicite:1]{index=1}  

In the View’s JS editor, add:

(function($){
  $(document).ready(function(){
    $('.js-wpv-layout-infinite-scrolling').removeClass('js-wpv-layout-infinite-scrolling');
  });
})(jQuery);

This keeps previous items and makes “Next” behave like a Load More button.

Remove your custom #load-more JS and button, and style the [wpv-pager-next-page] link as a button via CSS.

I followed the steps mentioned in this ticket:

https://toolset.com/forums/topic/create-load-more-button-with-toolset-blocks/

Thanks.