Jump to content

How to hide pagination numbers


newcoder1010

Recommended Posts

Hello, 

I have this html when I am on page 1:

<ul class="pagination"><li class="active"><span>1</span></li>
<li><a title="Go to page 2" href="/content/we-buy-houses-baltimore-md?page=1">2</a></li>
<li><a title="Go to page 3" href="/content/we-buy-houses-baltimore-md?page=2">3</a></li>
<li><a title="Go to page 4" href="/content/we-buy-houses-baltimore-md?page=3">4</a></li>
<li class="next"><a href="/content/we-buy-houses-baltimore-md?page=1"></a></li>
<li class="pager-last"><a href="/content/we-buy-houses-baltimore-md?page=3"></a></li>
</ul>

When I am on page 2, I see this html:

<ul class="pagination"><li class="pager-first"><a href="/content/we-buy-houses-baltimore-md"></a></li>
<li class="prev"><a href="/content/we-buy-houses-baltimore-md"></a></li>
<li><a title="Go to page 1" href="/content/we-buy-houses-baltimore-md">1</a></li>
<li class="active"><span>2</span></li>
<li><a title="Go to page 3" href="/content/we-buy-houses-baltimore-md?page=2">3</a></li>
<li><a title="Go to page 4" href="/content/we-buy-houses-baltimore-md?page=3">4</a></li>
<li class="next"><a href="/content/we-buy-houses-baltimore-md?page=2"></a></li>
<li class="pager-last"><a href="/content/we-buy-houses-baltimore-md?page=3"></a></li>
</ul>

 

Unfortunately, I do not have the option to hide the numbers in template file at this point. Instead, I would like to hide only the numbers using css. Please advise how to hide the numbers from the pagination class. Thank you in advance. 

Link to comment
Share on other sites

If you can afford to ignore Internet Explorer 10 and below, the :not() selector will do the job.

.pagination > li:not(.prev):not(.next):not(.pager-first):not(.pager-last) {
  display: none;
}

If you want to support more browsers, you would first hide all the list items, then show the ones you need:

.pagination > li {
  display: none;
}
.pagination > .prev,
.pagination > .next,
.pagination > .pager-first,
.pagination > .pager-last {
  display: inline-block; /* Or whatever display they're supposed to have */
}

But the best solution would actually be to prevent these links from appearing in the HTML in the first place, and the reason for that is that search engine robots may think you're trying to show different content to search engines than to the user.

How are these links being generated?

Link to comment
Share on other sites

VIews does not option to hide the numbers. What pagination option are you referring and recommending?

 

As for css, I will take the first option you provided. Thank you much.

 

Another question but not required. Currently, when I am on page 1, I see next class only. I see prev class when I am on page 2, 3,4. Is there way I can also display prev class when i am on page 1 as well. Prev class should point to page 4. If Prev class link is disabled on page 1, that will be fine too.  Again, it is not required. I thought it would better to have prev and next on all pages. 

Edited by newcoder1010
Link to comment
Share on other sites

If you're using Drupal 7 and Views UI then the pager options are in the middle column when editing views. You have the following options for pagers:

  •  Display a specified number of items
  •  Display all items
  •  Paged output, full pager
  •  Paged output, mini pager

The mini pager option has only previous, next, first and last buttons.

Link to comment
Share on other sites

There doesn't seem to be an option to remove those numbers, so you'll have to hide them with CSS, at least they're not links.

The CSS for this kind of pager is easier:

.pager-current {
  display: none;
}

 

Link to comment
Share on other sites

You just read my mind. I came to post it. You already did. I will choose mini pager option if I want to hide numbers. Thanks.

<ul class="pager"><li class="pager-previous"><a href="/content/we-buy-houses-kings-ny"></a></li>
<li class="pager-current">2 of 4</li>
<li class="pager-next"><a href="/content/we-buy-houses-kings-ny?page=2"></a></li>
</ul>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...