Pagination: How to limit number of pages on small screen devices

Question

I will have some pages and I have to apply pagination to them.

on small device (show only 2 page numbers):-

<<  <  1 | 2  >  >>

on medium and above devices (show all page numbers):

<<  <  1 | 2 | 3 | 4  >  >>

I am able to show all the page numbers on medium to large screens but the requirement is to show only 2 page numbers, at a time, on small screen devices. Please advice how to handle this responsive design, how to hide other numbers and show only 2 at a time on small screens?

https://jsfiddle.net/3rvm34a7/

I hope my javascript code worked for you. If so, please mark my answer as a correct solution. Thanks! — Sterling Beason, May 11 '17 at 04:19
https://ux.stackexchange.com/questions/48400/what-is-the-best-treatment-of-pagination-block-in-mobile-view — Hos Mercury, Dec 27 '20 at 09:43

score 1 · Answer 1 · edited May 23 '17 at 11:47

There are 2 ways to implement this :

1. Service side :

You can detect the HTTP user agent from server if you are using php or python etc. Accordingly you can send pagination html to the view.

2. Client side :

a) You can detect the device width or device agent from javascript. Then you hide the larger pagination if device is smaller and vice versa. Link : What is the best way to detect a mobile device in jQuery?

b) Using Css : You can apply class to link of pages 3,4. Use media query to hide these pages on smaller resolutions using simple css. However when i click on a page, make sure you update the page classes accoedingly and dynamically update the pagination HTML. Link : https://www.w3schools.com/css/css_rwd_mediaqueries.asp

score 1 · Answer 2 · answered May 10 '17 at 17:30

1

This is a CSS solution for hiding the pages on smaller devices and showing them for larger devices JSfiddle.
It will also showing and hiding other pages when rotating the tablet / phone to landscape.

You can resize fiddle window to see how it works.

answered May 10 '17 at 17:30

Nebojsa Nebojsa

835
5
15

Not suitable for dynamic websites – Hos Mercury Jan 01 '21 at 02:04
This is just `CSS` solution. You will add `span` element with `css` class with php or any other language is used to get pagination, with `if / else` according to current page – Nebojsa Nebojsa Jan 04 '21 at 10:07

score 0 · Answer 3 · answered May 10 '17 at 17:24

I updated your jsfiddle here: https://jsfiddle.net/3rvm34a7/1/

I added a "pg" class name to your list page numbers and added the following code.

if(screen.width < 500){
  var list = document.getElementsByClassName("pg");
  for(var i = 2; i < list.length; i++){
     list[i].style.display = 'none';
  }
}

Pagination: How to limit number of pages on small screen devices

3 Answers3