There is a function of pagination:

js

function pagination () {
  var rowshown = $ ('. quantity__link_active'). Data ('Value');
  if (rowshown === 'all') {
    $ ('. Table__row'). show ();
    $ ('. PageList__Link'). Remove ();
  } else {
    Var RowStotal = $ ('. Table __Row'). Length;
    var numpages = math.ceil (RowStotal / Rowsshown);
    $ ('. PageList__Link'). Remove ();
    for (var i = 0; i & lt; numpages; i ++) {
      var pagenum = i + 1;
      $ ('. PageList'). Append ('& lt; a href = "#" REL = "' + I + '" Class = "PageList__Link" & gt;' + pagenum + '& lt; / a & gt;');
    }
    $ ('. PageList__Link: First'). AddClass ('pagelist__link_active');
    $ ('. Table__row'). Hide ()
    For (var i = 0; i & lt; = rowshown - 1; i ++) {
      $ ($ ('. Table__row') [i]). show ();
    }
    $ ('. PageList__Link'). ON ('Click', Function () {
      $ ('. PageList__Link'). RemoveClass ('pagelist__link_active');
      $ (this) .addclass ('pagelist__link_active');
      $ ('. Table__row'). Hide ();
      var currpage = $ (this) .attr ('Rel');
      Var StartItem = Currpage * Rowshown;
      VAR EndItem = StartItem + Rowsshown;
      for (var i = startitem; i & lt; enditem; i ++) {
        $ ($ ('. Table__row') [i]). show ();
      }
      RETURN FALSE;
    });
  }
};

html

& lt; div class = "pagelist" & gt; & lt; / div & gt;
& lt; div class = "quantity__items" & gt;
  & lt; span class = "quantity__TEXT" & gt; Number of tasks: & lt; / span & gt;
  & lt; a class = "quantity__link quantity__link_active" href = "#" Data-Value = "20" & gt; 20 & lt; / a & gt;
  & lt; a class = "quantity__link" href = "#" Data-Value = "50" & gt; 50 & lt; / a & gt;
  & lt; a class = "quantity__link" href = "#" Data-Value = "100" & gt; 100 & lt; / a & gt;
  & lt; a class = "quantity__link" href = "#" Data-Value = "All" & gt; all & lt; / a & gt;
& lt; / div & gt;

Table __row is automatically embedded from JSON file.

If the pages are less than 7, it looks adequately, but as soon as the pages get more, then the guard is driving.

I would like to do this:

Please explain the “folding” algorithm of pages, if there are more than 5. It is desirable that the first and last page is always displayed.

Without ready-made solutions and plugins. I would like to understand how it works and write on your own.

Thank you!

UPD: Made a folding, but I can not understand how to output the following 2 pages.

if ($ ('. PageList__Link'). Length & gt; 5) {
      $ ('. PageList__Link'). Hide ();
      $ ('. PageList__Link: first'). show (). After ('& lt; Span class = "PageList__ellipses" & gt; ... & lt; / span & gt;');
      $ ('. PageList__Link: Last'). show ();
    }

Answer 1

It works like this:

Based on how many items you have and value (how many elements are displayed on the page) – VAR NUMPAGES is calculated.
Then there is a cycle for (var i = 0; i & lt; numpages; i ++) which adds a pagination link to DOM. The number of pages (and respectively references) directly depends on the elements in the .table__row and how much are shown on the page.
For example, you have 15 elements and five on page = Get 3 paginating links. If 50 elements then get 10 links and layout will go as you said.

Therefore, to solve your question, I wrote a P-y of Pagazy so that an array of numbers (links) generated. Moreover, if the penultimate number of the link list is less than the penultimate number of the total number of references, it is shown a dot. For example:

var totalelements = 600; // Elements Total
var perpage = 5; // How many elements on the page
var visiblelinks = 10; // How many links want to see;

For this, the conditions initially generates an array of 10 numbers (links) of this type:

[1,2,3,4,5,6,7,8,9,120] \\ last number is TotalElements / Perpage.

Since 9 less than 119 then on the page show a lot after nine

Here is an example of all pagination on Codepen jQuery Pagination

For turning, you need to click on the extreme links (which is inside the dots) or just on the initial and ultimate link to quickly go to the beginning or end