Skip to content Skip to sidebar Skip to footer

How To Display The Number Of Pages (1/x)?

Need a solution to display the number of pages in this way(js/jq): 'Page 1 of X'. When switching to another window(column) (which continues the content, for example, to the second

Solution 1:

I made a codepen with your code examples here:

https://codepen.io/dschenk/pen/eoRooz

(codepens like this help other people look at and debug code more easily)

I started with an implemention of the page-number counter you asked for. There are basically four things you need to do:

  • Have an element in the HTML where the page-counter will be
  • Initially set the current-page number and the amount of pages there are.
  • Update the current-page whenever the content-window is changed.
  • Update the amount of total pages when the window is resized.

To accomplish this you can create two basic functions:

functionsetAmountOfPages(amountOfPages) {
    $(".page-number > .page-amount").html(amountOfPages);
}

functionsetCurrentPageNumber(currentPageNumber) {
  $(".page-number > .page-current").html(currentPageNumber);
}

Now you need to call them at the right time with the right argument.

I hope this serves as a starting point for you.

(There is a bug present: when one clicks very fast, you can get the current-page to show "0/8". This happens because of the timing functions)

Post a Comment for "How To Display The Number Of Pages (1/x)?"