[Resolved] Conditional display of pagination

[Author]

Posts

[lesleeM]

Is there any way to make the display of pagination conditional on whether or not there are multiple pages? I have set up a select page dropdown pagination for a view. This is needed when there are multiple pages of results. But it is displaying even on pages where we only have one page of results. Our pagination count is 20, so we'd like the pagination to remain hidden if the number of results is 20 or less.

[Christopher Amirian]

Hi there,

If you use the default pagination feature of Toolset, the thing you mentioned will be handled automatically:

hidden link

But if you want your custom method, I might be able to give you a Javascript code to hide that below 20. Please share the link that contains the dropdown so I can check and be able to suggest a code.

Thanks.

[lesleeM]

You can see an example of the pagination showing even though there are only 15 results present on the page here:

hidden link

Look at the My Rides section.

I have the pagination set up in the Output Editor section on the classic editor as follows:

<h3>My Rides</h3>
[wpv-filter-meta-html]
[wpv-layout-meta-html]
<div class="form-inline">
<div class="form-group">
<label for="wpv-pager-nav-dropdown">[wpml-string context="wpv-views"]Go to page[/wpml-string]</label>
[wpv-pager-nav-dropdown output="bootstrap"]
</div>
</div>

When I put it in the Search and Pagination section it appears above the output. We wanted this to display below the output. Maybe something I've done there is what's causing it to not hide.

[Christopher Amirian]

Hi there,

Please add this Javascript code:

    document.addEventListener('DOMContentLoaded', function() {
        var selectElement = document.querySelector('.js-wpv-page-selector');
        
        // Check if select has only one option
        if (selectElement && selectElement.options.length <= 1) {
            // Hide the closest parent container with the class 'form-inline'
            var paginationContainer = selectElement.closest('.form-inline');
            if (paginationContainer) {
                paginationContainer.style.display = 'none';
            }
        }
    });

For more information:

https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/

Thanks.

[lesleeM]

Looks like that is working. Thanks a bunch as always!

[lesleeM]

My issue is resolved now. Thank you!