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 component bootstrap pagination 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 allowed 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.
Reg.ru: domains and hosting
The largest registrar and hosting provider in Russia.
More than 2 million domain names in service.
Promotion, domain mail, business solutions.
More than 700 thousand customers around the world have already made their choice.
*Mouse over to pause scrolling.
Back forward
Smart Pages: Pagination using jQueryBreaking content into separate pages (pagination) is a common solution when working with large amounts of information. This is usually implemented by transmitting a number desired page an additional processor that retrieves information from the database and returns it in a certain form. A labor-intensive process, but a necessary evil. Or not?
When working with small amounts of information, wouldn't it be convenient to have the content already prepared in advance, clearly organized and easily accessible?
Now we will make a solution in jQuery, which will allow us to convert the usual unordered list elements in a friendly search engines a set of pages with easy navigation. This plugin can be used for comments, slideshows or any other type of structured content.
Concept
When called, the plugin splits elements
- , to which the property is set overflow:hidden. A certain number of navigation links are generated, which move the corresponding page with elements into the visibility zone
- .
Look at the illustration below to better understand the idea.
Step 1 - XHTML
The first step is to create the XHTML markup. The plugin needs to be provided with an unordered list
- with a certain number of elements
- inside it. Below is the code from the demo.html file, which you will find in the example archive:
- Lorem ipsum dolor sit amet...
- Lorem ipsum dolor sit amet...
- Lorem ipsum dolor sit amet...
- Lorem ipsum dolor sit amet...
Block main acts as a container for the paginated element
- , and a light gray background is applied to it. An unordered list contains elements.
- any content, since the dimensions are automatically calculated by jQuery (if you want to use images, remember that you need to specify their width and height).
Step 2 – CSS
After creating the markup, we will start giving it a styling. It's a good idea to use styles as if you didn't have pagination, since the plugin depends on JavaScript. This means that there is a possibility that some users will not be able to see and therefore use your pagination navigation.
styles.css – Part 1
#main( /* The main container div */ position:relative; margin:50px auto; width:410px; background:url("img/main_bg.jpg") repeat-x #aeadad; border:1px solid #CCCCCC; padding :70px 25px 60px; /* CSS3 rounded cornenrs */ -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; ) #holder( /* The unordered list that is to be split into pages */ width:400px; overflow:hidden; position:relative; background:url("img/dark_bg.jpg") repeat #4e5355; padding-bottom:10px; /* CSS3 inner shadow (the webkit one is commeted, because Google Chrome does not like rounded corners combined with inset shadows): */ -moz-box-shadow:0 0 0 10px #222 inset; /*-webkit-box-shadow:0 0 10px #222 inset;*/ box-shadow:0 0 10px #222 inset; ) .swControls( position:absolute; margin-top:10px; )
First things first, let's style the block. main and an unordered list (the latter is assigned id = holder).
Notice that we are using the shadow effect in CSS3 with the attribute inset to simulate an internal shadow. As with most CSS3 rules, we still need to specify the rules separately for specific browsers: Mozilla engine (Firefox) and Webkit engine (Safri and Chrome).
You may have noticed that the webkit version is commented out. This is due to a bug when drawing shadows in Chrome when using this property simultaneously with the property border-radius(the shadows are created as if the block had right corners, ignoring their fillets and therefore ruining the effect).
styles.css – Part 2
A.swShowPage( /* The links that initiate the page slide */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*border: 1px solid #ccc;*/ /* CSS3 rounded corners */ -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; ) a.swShowPage:hover, a.swShowPage.active ( background-color:#2993dd; /* CSS3 inner shadow */ -moz-box-shadow:0 0 7px #1e435d inset; /*-webkit-box-shadow:0 0 7px #1e435d inset;*/ box-shadow :0 0 7px #1e435d inset; ) #holder li( background-color:#F4F4F4; list-style:none outside none; margin:10px 10px 0; padding:20px; float:left; /* Regular CSS3 box shadows (not inset): */ -moz-box-shadow:0 0 6px #111111; -webkit-box-shadow:0 0 6px #111111; box-shadow:0 0 6px #111111; ) #holder, #holder li( / * Applying rouded corners to both the holder and the holder lis */ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; ) .clear( /* This class clears the floated elements */ clear:both; )
The class completes the code clear, used to reset element wrapping.
Step 3 - jQuery
In the final part of the lesson, we need to include on the page latest version jQuery libraries. From a performance perspective, it is wise to include all external JavaScript immediately before the closing body tag, since scripts block the rendering of the page.
script.js – Part 1
(function($)( // Creating the sweetPages jQuery plugin: $.fn.sweetPages = function(opts)( // If no options were passed, create an empty opts object if(!opts) opts = (); var resultsPerPage = opts.perPage || 3; // The plugin works best for unordered lists, // although OLs would do just as well: var ul = this; var li = ul.find("li"); li.each(function ()( // Calculating the height of each element, // and storing it with the data method: var el = $(this); el.data("height",el.outerHeight(true)); )); // Calculating the total number of pages: var pagesNumber = Math.ceil(li.length/resultsPerPage); // If the pages are less than two, do nothing: if(pagesNumbermaxHeight) maxHeight = tmpHeight; totalWidth+=elem.outerWidth( ); elem.css("float","left").width(ul.width()); )); swPage.wrapAll(""); // Setting the height of the ul to the height of the tallest page : ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append("").width(totalWidth); var hyperLinks = ul.find("a.swShowPage"); hyperLinks.click(function(e)( // If one of the control links is clicked, slide the swSlider div // (which contains all the pages) and mark it as active: $(this).addClass("active") .siblings().removeClass("active"); swSlider.stop().animate(("margin-left": -(parseInt($(this).text())-1)*ul.width()) ,"slow"); e.preventDefault(); )); // Mark the first link as active the first time the code runs: hyperLinks.eq(0).addClass("active"); // Center the control div: swControls.css(( "left":"50%", "margin-left":-swControls.width()/2 )); return this; )))(jQuery);
In the second part of the script, we loop through the newly created pages, size them, and set them to float to the left. In the process of this, we find the "tallest" page and, in accordance with this, set the height of the element
- .
- You can use touch and mouse swipe navigation
- You can use different types of the pages change
- State of active page is saved in the History API
- You can use different sets of controls: numbers, arrows, point, progress bar, and a field for entering the desired page
- You can use one of the ready-made themes
- You can improve the appearance of not only text, but also images or lists
- Using a large number of different parameters and methods, you can create a candy instead of boring text SETS OF CONTROL ELEMENTS
We also block pages swSlider, which is wide enough to display them side-by-side. Next, we track the click event on the navigation links and move the block swSlider method animate. This creates the sliding effect you see in the demo.
script.js – Part 3
$(document).ready(function())( /* The following code is executed once the DOM is loaded */ // Calling the jQuery plugin and splitting the // #holder UL into pages of 3 LIs each: $("# holder").sweetPages((perPage:3)); // The default behavior of the plugin is to insert the // page links in the ul, but we need them in the main container: var controls = $(".swControls ").detach(); controls.appendTo("#main"); ));
In the last part of the code we simply call the plugin and pass the setting perPage(how many elements per page to display). Also note the use of the method detach, introduced in jQuery 1.4. It removes elements from the DOM (Document Object Model) but leaves all event listeners intact. This allows us to move control references outside the element
- , where they were originally located, while maintaining the desired functionality.
jQuery pagination plugins are scripts that can be integrated into your site to split pages and posts into multiple separate pages. There are basically two ways to create website pagination. Either through a plugin that splits the data into multiple pages after the page has loaded, or through a server-side script where the required amount of data is retrieved from the database and then loaded onto the page. Pagination can be in a good way increase the number of page views on your site, and thus also improve bounce rates and other behavioral factors taken into account by search engines.
If you have a large amount of data on your pages, then plugins for creating page navigation will help make the content more convenient for visitors. In this article, we will share with you some plugins that will help you create the desired pagination settings on your websites. Most of these plugins are free and can be integrated into any design.
This is a great jQuery plugin from Remy Elazare that combines pagination and scrolling into a simple user interface.
jPaginate
jPaginate is a jQuery pagination plugin that has one feature: animated page numbers. The user can scroll through the available page numbers by clicking or simply hovering over the arrow. Links to the first and last pages are also available.
Pajinate
Pajinate is a simple and flexible jQuery plugin that allows you to split long lists or content into multiple separate pages. Not only is this a simple alternative to a server-side implementation, page loading time between page transitions is practically zero (with a reasonable page size, of course).
Simple jQuery plugin to create pagination with three CSS themes.
jPList
jPList is a flexible jQuery plugin for sorting, paginating and filtering any HTML markup (DIV, UL/LI, tables, etc.) - premium plugin from CodeCanyon.
This plugin creates simple content sorting and allows you to manage your content using pagination! Simple Content Sorting provides an easy way to decorate your interface by providing a convenient sorting mechanism. - Premium plugin it CodeCanyon
Easy Paginate
This plugin allows you to easily view a list of elements, paginated. It is very easy to implement and very lightweight, so it can be useful for use in your own projects.
SimplePager
SimplePager allows you to create pagination with as little effort and configuration as possible. This plugin can paginate divs, paragraphs, list items, and almost any other content.
jQuery plugin that provides new method pagination for your website or application. Instead of outputting a list of page numbers as in traditional methods, jqPagination uses an interactive output of page numbers, such as "1 of 5 Pages", when selected, the plugin allows the user to enter the desired page number. The "first page", "previous", "next" and "last" links are enabled by default, but can be disabled.
If you have a large list of items (for example, search results or news, articles), you can group them by individual pages and add navigation elements using this plugin.
Another jQuery plugin for creating page navigation. It's attractive, intuitive, comes with a page scroller, and you can add an unlimited number of pages.
jQuery plugin for creating pagination (for different contents), which is based not on the number of elements on the page, but on the height of the content area.
Smart Paginator
Smart Paginator is a feature-rich jQuery pagination plugin that makes adding pagination a breeze, and it's also highly customizable. Smart Paginator can also automatically filter data on the client side.
As the name suggests, it uses Ajax to create page navigation on your site. It will only load a certain part and not the entire page, thus speeding up the loading time of the site.
Sweet Pages
Sweet Pages is a jQuery plugin that allows you to transform a simple unordered list of elements into a convenient set of pages with navigation. It can be used for comments, slideshows, or any other type of structured content.
If you have any questions, we recommend using our
Classic of Pagination consists of a set of buttons, such as "Home", "Previous", "Next", "Last page" button, and of course - the page numbers. Also consists of a block of page status. Each item is a separate and independent element, which can be displayed anywhere on the page or not display at all.
To quickly jump to the desired page - enter the page number in the box and click "OK".
This set is perfect navigation suitable for a small number of pages, when enough simply turn the pages back and forth
This is the most minimalist view of the controls, similar to the one that you used to see in the sliders.
This control is useful if you need to have quick access to all pages. This type of control is suitable for large text, and for small posts
This kind of control is minimized due to the absence of buttons with page numbers.
This is a stylish and modern look of management of pages. It takes up very little space, but it is very functional.
This is not a standard type of pagination. With it is possible to estimate the percentage of read pages.
Control elements not necessary to register in the plugin. You can manually add any control to any location of code, but it is necessary to specify unique name of the pagination block in the data-href attribute, and transition identifier. As a control button, you can use any html element: a, button, span, div, img and other.
This set of controls combines the classic look and a block for bystoro transition to the specific page.
TYPE OF CONTENTSIf you are using a plug-in to block that contains only text nodes, the text will be divided into parts by a dots if they are in the text. If the text is not points, for the separation of the text you need to specify the character in the parameter "splitSymbols", such as space, letter, or other
If you are using a plug-in to block that contains paragraphs tags or other html tags with text, the text will be divided into parts by this html tags.
Plugin equally well splits on the page as tags for formatting text and image tags. Keep an eye on the behavior of the image height using CSS styles
list is split as other tags. The most important thing is that the list of elements is a child of the initialization element
MORE DEMOSOn one page may be several blocks with page navigation. And each of this blocks can have your settings
This parameter specifies the number of the page to be displayed after the first download site
In most situations, this markup will probably be generated by some background script, freeing you from having to do it manually. You can place inside elements
- inside it. Below is the code from the demo.html file, which you will find in the example archive: