Collection of free HTML and CSS pagination code examples: responsive, simple, material design, navigation dots, etc. Update of June 2018 collection. 5 new items.
Related Articles
About the code Responsive pagination/pager in HTML and CSS. Resize your browser to show interesting effect.
Responsive: yes
Dependencies: bootstrap.css
About the code Line Follow PaginationCSS line follow pagination.
Responsive: yes
Dependencies: -
About the code Pagination ButtonsPure CSS pagination buttons.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code Line Pagination with HoverPure CSS line pagination with hover effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code Pacman PaginationPagination animation with HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code Simple CSS.
About the code Pure CSS Pac-Man pagination with animation on hover.
About the code Simple responsive pagination.
About the code HTML and CSS pagination.
About the code Pagination example that allows you to navigate between different pages. This example would have to have href attributes in order to work with an actual application that requires pagination.
About the code Pagination with CSS custom properties.
Pagination options and designs.
Made by MojoM
May 25, 2017
Demo GIF: SVG Page Hopper
HTML, CSS and SVG page hopper.
Made by Chris Gannon
May 14, 2017
Demo GIF: Infinite Pagination
Infinite pagination in HTML and CSS.
Made by Mariusz Dabrowski
April 27, 2017
About the code CSS Components: .
12 ideas for website pagination with HTML and CSS.
Made by Rosa
November 3, 2016
Demo GIF: Pagination
Pagination with HTML/CSS/JavaScript.
Made by JP Nothard
October 9, 2016
Demo GIF: Pagination Hover Animation
HTML and CSS pagination hover animation.
Made by Elena Nazarova
September 12, 2016
Pagination with a hover effect.
Made by Andre Wichert
August 27, 2016
Pagination indicators with HTML, CSS and JavaScript.
Made by Moses Holmstrom
August 19, 2016
Made by Brendan Mullins
August 16, 2016
Create a magic line for your pagination. It looks awesome.
Made by Ryan Yu
February 18, 2015
Responsive, accessible, alternate pagination experiment.
Made by Simon Goellner
November 11, 2014
Demo GIF: Pagination Arrows
Flexing pagination arrows.
Made by Hakim El Hattab
October 18, 2013
In this article we will look at the process of creating such a web interface element as a navigation block for pagination. In Bootstrap 3 and 4, this UI element is implemented using the Pagination component.
What is pagination?Pagination is page-by-page display of data. Those. This is the kind of output when the data is not output all at once, but in small parts (pages).
A navigation block is used to navigate through these parts (pages).
The Pagination component of the Bootstrap framework is precisely designed to create this interface element, i.e. navigation block.
Creating a navigation block for paginationIn Bootstrap 3, the navbar has the following structure:
- Previous
- 1
- 2
- 3
- Next
The nav element in this fragment acts as a wrapper container. It is needed in this structure only so that assistive technologies perceive this fragment of HTML code as navigation.
In addition, it is advisable for assistive technologies to also explain what kind of navigation block this is. This action is carried out using the aria-label attribute.
Navigation block markup for pagination in Bootstrap is done using a bulleted list. Each navigation link in this block is an a element wrapped in a li and placed in a ul .
The visual design of the navigation block in Bootstrap is done using the pagination class, which must be added to the ul.
Navigation block structure in Bootstrap 4:
- Previous
- 1
- 2
- 3
- Next
Note that in Bootstrap 4 you need to add classes to the li and a elements. K li is the page-item class, and k a is page-link . These classes set CSS styles for elements and are necessary for the correct display of the navigation block.
Using icons instead of text inscriptionsAn example of a navigation bar for pagination that uses icons as the content of some links:
- First
- « Previous
- 1
- 2
- 3
- » Next
- Last
Changing the state of a navigation link Changing the state of links in a navbar is done using the disabled and active classes. The first class (disabled) is used to create a non-active (non-clickable) link. The second class ( active ) is required to highlight (indicate) the current page. You need to add the active and disabled classes not to the link itself, but to the li element.
- Previous
- 1
- 2
- 3
- Next
- Previous
- 1
- 2
- 3
- Next
The disabled class sets links to the CSS declaration pointer-events: none . This announcement is intended to disable the functionality of the link. But it does not disable the transition to it using the keyboard. Therefore, if you want to completely disable the functionality of such links in your project, then you need to additionally track them using JavaScript and add the tabindex="-1" attribute to them.
Another way to disable link functionality is to not use the a element.
- Previous
- 1
- 2
- 3
- Next
In Bootstrap 3 and 4, you can resize the navigation block using the pagination-lg and pagination-sm classes. This is done by adding one of these classes to the pagination class.
The first class (pagination-lg) is used when it is necessary to increase the size of the navigation, and the second (pagination-sm) when it is necessary to reduce it.
- Previous
- 1
- 2
- 3
- Next
- Previous
- 1
- 2
- 3
- Next
In Bootstrap 3, navbar alignment for pagination is done using text alignment classes.
In Bootstrap 4, navbar alignment for pagination is done using flex classes.
Pager Component (Bootstrap 3)
Pager is a Bootstrap 3 component that is designed to create simple navigation across pages or other site content. This component consists of 2 buttons (links).
One of the most common uses of this navigation is to have the first button take you to more new entry on the site, and the second - to the older one.
Pager component syntax:
- Previous
- Next
By default, Pager component buttons are centered. But besides this option, Bootstrap 3 also allows you to align them along different edges. This is done by adding the class previous to the first button, and next to the second. The previous class aligns the link to the left, and next – to the right.
- Previous
- Next
Setting a button to a disabled state is done by adding the disabled class to it.
- ← Previous
- Next →
Websites usually contain several pages. They can contain 3-5 pages, for example on a landing-page, or maybe more, much more.
Every good website should contain navigation that will allow the user to correctly navigate and move between pages of the site. You can create such pagination using JavaScript. In this article we will talk about how to create such navigation.
One more thing, in addition to regular JavaScript, the example uses Bootstrap 4. Its bootstrap pagination component is combined with the JQuery library, namely the special Buzina Pagination plugin. It allows you to split all the information into several pages with navigation between them.
Connecting the necessary frameworksTo work with Bootstrap and JQuery, you need to connect them. This can be done in your HTML document, using tags. Create 3 paired tags ;. We will connect Ajax.js, bootstrap 4 and the JQuery plugin itself.
To correctly connect bootstrap, you also need to use the tag; in its href attribute we indicate a link to our framework. It will contain a link to the styles that the plugin contains.
So, we have connected everything necessary for work. All that remains is to connect the plugin for creating pagination - Buzina Pagination. To create it, we also create and tags. In the "href" and "src" attributes we enter the same link.
The Buzina Pagination and Bootstrap plugins, in addition to scripts, also contain the necessary styles. We connect them via the tag ;. Now remember - even if you have a good understanding of CSS, we do not recommend that you go in and change plugin settings. Just for fun, you can open them in a code editor and view them, but be sure to save the original version of the code first.
Your HTML document should contain the following code:
Pagination for the site using jQuery: Bootstrap 4 .container ( margin: 150px auto; ) Page layout. HTML In all our articles we looked at the creation of 1 HTML pages, in the same example we will create several at once, through one document. At the same time, we will not place them on different links; they will be accessible by clicking on the button. We will create a separate block for each page.
In our example, we are creating a total of 5 pages. Create a separate one for each of them div block. You can write some text inside for visual display. If you want, you can create 10, 20 and 30 pages.
You don't need classes or identifiers to work with them. The main thing is that all these pages are located inside the main block with the example class.
JQuery functions You need to connect several functions:
Conclusion 
We have finished creating the pagination. In the end, what did we get? We have well-styled navigation that will suit your website perfectly. Add a few elements and you can adapt it to the pages you have.
You can change the scripts as you wish, but only if you are well versed in JavaScript. The main thing is not to change the values of scripts and plugin styles.
This pagination has a huge advantage - ease of use. The user will not need to load additional links to navigate between pages.
Moreover, due to the small number of scripts used, optimization will not be greatly reduced.
Tags:Pagination, or if popprost - page navigation, is an important element of any more or less complete website. Various systems Site management systems, for the most part, have built-in tools for implementing pagination. There are also a lot of separate plugins written for this useful task; in most cases they are built using the . All these plugins are different both in execution style and in functionality, but the main thing is that they are an excellent alternative to the server-side implementation of breaking the voluminous content of sites into pages.
I offer for consideration, in my opinion, one of the easiest jQuery plugins, for creating page navigation, which will help you organize, attractive and fast pagination.
Very light in all respects, both in terms of weight and everything regarding connection, settings, fast for creating pagination, equipped with three design styles, and charged with support.
By the way, if you are not satisfied with the standard styles, you can use, which will not be difficult to attach to the .css of the plugin.
Now, let's take a closer look at how to correctly connect the plugin itself and the style file to the document, that is, directly implement it on the site's pages, and go through the available plugin settings.
To begin with, of course, you need to have a plugin, that is, with sources, in which you are carefully packaged jquery javascript and css style file.
Let's look at how to use the plugin step by step:
In the body of the page, in the ... section, you need to connect the jQuery framework, preferably version 1.7.2, or more recent, this can be done using a special Google repository:
If you already have jQuery enabled on your site and working at full speed, you can safely skip all the movements described above, the main thing is to make sure that the jQuery version is not too dense. In WordPress, by the way, this is all right.
Next, we connect our workhorse- jquery.simplePagination.js plugin:
You don’t have to fuss about it, but simply select the style you need, light, dark or compact, and paste a set of rules into the styles.css file of your template. Registering your own styles or using Bootstrap is also an option, in terms of originality and development of site-building skills, even more preferable.
To display the page navigation panel on the site pages, where you plan to place it, more logically and most often, this is at the bottom of the main content, you should write the following:
For a light background:
Compact theme:
$(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));
In the example, I used initialization for pagination of the light theme #light-pagination , you can change the selector to another, for compact it is #compact-pagination , or for dark style #dark-pagination . In this case, do not forget to change the class in the cssStyle function.
As I already wrote above, the plugin is very flexible in settings, the following options are available for change:
- items — The total number of items that will be used to calculate pages. Default: 1.
- itemsOnPage — The number of items to display on each page. Default: 1.
- pages — Optional. If a value is specified, the items and itemsOnPage options are ignored. Sets the number of pages in the list.
- displayedPages — How many page numbers should be visible during navigation. Minimum permissible value: 3, default: 5.
- edges — How many page numbers are visible at the beginning and end of the numbering. Default value: 2.
- currentPage — Which page will be selected immediately after launch. Logical, default value: 1.
- hrefTextPrefix - The string used in the HREF attribute is added before the page number. Default: "#page- " .
- hrefTextSuffix — The string used in the HREF attribute is inserted after the page number. Default is empty string.
- prevText — Text of the button to the previous page. Default: "Prev".
- nextText — Button text on next page. Default: "Next"
- cssStyle — Define CSS style. Default: "light-theme"
- selectOnClick - Selecting a page after clicking, by default - enabled (true), I still don’t understand why to disable it, but there is such an option, value: “false”.
We looked at the most basic settings. ABOUT additional functions and the available methods for using this plugin, you can find out by studying the documentation directly on the developer’s page.
All I can do is wish you good luck and success in working on your new projects.
Pagination, including page navigation, is sufficient simple thing, but beginners often have problems creating it, and most importantly, understanding its work...
One of the tasks of pagination is the simultaneous output of not all elements, but a limited number of them, say, no more than $pp elements, and which particular group of elements is output depends on the input parameter $pn - the number of this group. This number is, in fact, the page number. Here you need a query like this:
SELECT * FROM `table` LIMIT (($pn-1)*$pp),($pp)
The value of $pn is decreased by 1 so that, for example, for the first page of the list with a value of $pp equal to 10, elements from 0 to 9 are selected, and not from 10 to 19. Naturally, if pages are numbered from zero, the value of $ is decreased by 1 pn is not needed in the request.
To solve the next problem, namely building page navigation, you first need to know the total number of pages in the list. To do this, you can first query the total number of elements. Or, directly in the query, calculate the total number of pages based on the total number of elements:
SELECT FLOOR((COUNT(*)+($pp-1))/($pp)) FROM `table`
To get the total number of pages $pc, the fairly well-known formula $pc=(count+per_page-1) div per_page is used here, but adjusted to use the FLOOR function instead of integer division (div). You can also use the DIV operator, which has been supported in MySQL for quite some time.
If you only need to display one element per page, the above queries can be simplified.
Once the total number of pages $pc is obtained, you can immediately display links to all pages of the list using a loop with a counter in the range from 1 to $pc , however, usually a more sophisticated navigation is used, in which links to not all pages are displayed simultaneously, but only to pages with numbers in a limited range depending on the current page number. For example, here are the formulas for obtaining the range-limiting values of $first and $last for the so-called bank navigation:
$first=$pn-1-($pn-2)%$range; $last=$first+$range$pc) error(404); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$ pn-1-($pn-2)%$range; $last=$first+$range>