/    Sign up×
Community /Pin to ProfileBookmark

How to hide pagination with JS

I am trying to hide the pagination when only one page is needed after a search through the data. I’m using an if statement calling to the id given to the pagination on the html page but it is not working.

this is the pagination.js

[code]
function showHidePagination() {
if(document.getElementById(‘paginationField’).length > 15) {
document.getElementById(‘pagination’).style.display=’none’;
} else {
document.getElementById(‘pagination’).style.display=’block’;
}
}
[/code]

this is my home.html pagination portion:

[code]
<div class=”pagination” id=”paginationField”>
<nav aria-label=”…”>
<ul class=”pagination”, id=”pagination”>
<li class=”page-item {% if not prev_page_url %}disabled {% endif %} “>
<a class=”page-link” href=”{{ prev_page_url }}” tabindex=”-1″>Previous</a>
</li>
{% for n in page.paginator.page_range %}
{% if page.number == n %}
<li class=”page-item active”>
<a class=”page-link” href=”?page={{ n }}”>{{ n }} <span class=”sr-only”>(current)</span></a>
</li>
{% elif n > page.number|add:-3 and n < page.number|add:3 %}
<li class=”page-item”>
<a class=”page-link” href=”?page={{ n }}”>{{ n }}</a>
</li>
{% endif %}
{% endfor %}

<li class=”page-item {% if not next_page_url %}disabled {% endif %} “>
<a class=”page-link” href=”{{ next_page_url }}”>Next</a>
</li>
</ul>
</nav>
</div>[/code]

to post a comment
HTMLJavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@NogDogOct 26.2020 — Welcome to the forums. Note that I edited your post to use this forum's ... tags to format you code blocks. (The "Insert Code" button is really only useful for a bit of in-line text that you want to be mono-spaced.)
Copy linkTweet thisAlerts:
@NogDogOct 26.2020 — Caveat: I am not a JavaScript expert. However, would it be simpler to just add a check in whatever framework you're using to only output that entire div at all if there are X or more pages?
Copy linkTweet thisAlerts:
@pikachu88Oct 28.2020 — I don't know what to say really, what you share is so good and useful for the community, I feel that it makes our community much more developed, thanks. [driving directions](https://drivingdirectionss.com)
Copy linkTweet thisAlerts:
@HarshShahOct 29.2020 — Use drawCallback option to handle the event and show/hide pagination control based on available pages:

``<i>
</i>$('#table_id').dataTable({
drawCallback: function(settings) {
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages &gt; 1);
}
})<i>
</i>
``

I hope it can be helpful to you.
Copy linkTweet thisAlerts:
@tazmeahDec 29.2020 — It would help if you provided a link to the page in question. However, your JavaScript says "if there are more than 15 items with an id of 'paginationField'...", while your HTML shows only one item with such an id which is the very first div. Since the HTML you provided has several list-items ( <li> ), I assume this is what you want to count. If so, I would change line 2 of your JavaScript code to this

if(document.querySelectorAll(".page-item").length &gt; 15) {

Again, however, I'm only guessing based on what you've shown us. The rest of the logic doesn't quite make sense to me. It's saying if there are MORE than 15 of something DON'T show pagination. It seems to me like it would need to say if there are LESS than or equal to 15 of something, DON'T show pagination. Right? In which case, I'd use this

if(document.querySelectorAll(".page-item").length &lt;= 15) {
×

Success!

Help @thalldakota spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...