Skip to content

Latest commit

 

History

History
56 lines (40 loc) · 3.44 KB

README.md

File metadata and controls

56 lines (40 loc) · 3.44 KB
Raw

NgxPaging

Angular paging component

NPM package

install npm ngx-paging

Dependency

Angular version 9.1.5 or up.

Features

  1. Show on need
    When there is no need for paging at all (for example the items which need to display less than the page size) then the HTML component will disappear.
    This will be established by statement shouldPagingComponentBeHidden.
    you can set the property showComponentAlways to true to always show the component, even if there is neeed for showing the pages.

  2. Disable on need
    for example, if you are already selected the last page, why the last page or the Next button should be available to press?
    *I am handling this and in that case I am disabling those buttons by applying disabled class on those buttons`

  3. Distinguish the Selected page
    a special class (in this case called active class) is applied on the selected page, to make the user know in which page he/she is right now.
    This is established by the applying the active class

  4. Last & First
    going to the first and last page is also available by simple buttons dedicated to this.

  5. Limits for displayed buttons
    Suppose you have a lot of pages, for example 1000 pages, then what will happened? would you display them all for the user ? absolutely not
    you have to display just a few of them according to the current page. for example showing 3 pages before the current page and other 3 pages after the selected page.
    This case has been handled here generatePages
    the generatePages function applying a simple algorithm to determine if we need to show all the pages (the page count is under the threshold, which could be determined easily), or to show just some of the buttons.
    you can determine the threshold by changing the value of the maxPageCount variable
    Right now I assigned it as the following maxPageCount = 7; which mean that no more than 7 buttons could be displayed for the user (3 before the SelectedPage, and 3 after the Selected Page) and the Selected Page itself.

    You may wonder, what if there was not enough pages after OR before the current page to display? do not worry I am handling this in the algorithm
    for example, if you have 11 pages and you have maxPageCount = 7 and the current selected page is 10, Then the following pages will be shown

    5,6,7,8,9,10(selected page),11

    so we always stratifying the maxPageCount, in the previous example showing 5 pages before the selected page and just 1 page after the selected page.

  6. Selected Page Validation
    All set operation for the currentPage get property which determine the selected page by the user, is go through the validation.
    the validation will check that before setting the value we make sure that we will not go beyond the available pages.

NOTE 1
You may noticed that I am using some bootstrap classes in this component, This is suitable for me, but of course you can use your own classes instead of the bootstrap classes.
The bootstrap classes which I used here are pagination, pagination-sm, active and disabled
Feel free to change them as you need.

Contrinution

PRs is more than welcome
No specific style is needed, your code will be refactored anyway, so use the style which you love