Ellipsis to end and begin on pagination

[paullryan]

In working with the pagination system it would be nice to have a feature where ellipsis with escapes to the start and end of the page set automatically appear when the set of pages is greater than max-size. Something like like which would render something like

<div class="pagination" num-pages="noOfPages" current-page="currentPage" max-size="maxSize">
    <ul>
        <li ng-class="{disabled: noPrevious()}">
            <a ng-click="selectPrevious()" href="" class="ng-binding">Previous</a>
        </li>
        <!-- ngRepeat: page in pages -->
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope">
            <a ng-click="selectPage(page)" href="" class="ng-binding">1</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="disabled">
            <a href="#" class="ng-binding">...</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope">
            <a ng-click="selectPage(page)" href="" class="ng-binding">105</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope">
            <a ng-click="selectPage(page)" href="" class="ng-binding">106</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope active">
            <a ng-click="selectPage(page)" href="" class="ng-binding">107</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope">
            <a ng-click="selectPage(page)" href="" class="ng-binding">108</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope">
            <a ng-click="selectPage(page)" href="" class="ng-binding">109</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="disabled">
            <a href="#" class="ng-binding">...</a>
        </li>
        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}" class="ng-scope">
            <a ng-click="selectPage(page)" href="" class="ng-binding">300</a>
        </li>
        <li ng-class="{disabled: noNext()}">
            <a ng-click="selectNext()" href="" class="ng-binding">Next</a>
        </li>
    </ul>
</div>

with an output of

[<] [1] [...] [105] [106] [107] [108] [109] [...] [300] [>]

Any interest in this from others? If so I might try to update the current directive and submit back.

[petebacondarwin]

Not a bad idea. If you do work on it read our submission guidelines and make sure you write unit tests for the new functionality.

[ajoslin]

We might want to refactor things a bit to add this, actually. Will need to add '...' elements to the page array after the first element and/or before the last, if some conditions are met.

I guess that could be done in the for loop currently, but that seems ugly. With the addition of maxSize and then ellipses, the code could get a bit messy here.

[petebacondarwin]

Can't we do it in the template?

On 6 February 2013 05:23, Andy Joslin notifications@github.com wrote:

We might want to refactor things a bit to add this, actually. Will need to
add '...' elements to the page array after the first element and before the
last, if some conditions are met.

I guess that could be done in the for loop currently, but that seems ugly.
With the addition of maxSize and then ellipses, the code could get a bit
messy here.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/120#issuecomment-13167738.

[ajoslin]

Yes, but it would require ng-show or ng-switch, which would create a lot (3x more) of extra elements either way.

[bekos]

A common (& simpler to implement) practice is to add Fisrt and Last buttons.

Example output:
[First] [Previous] [1] [2] .....[10] [Next] [Last]


Conditions to disable these button is also simple.

[petebacondarwin]

We should have an option for these too!

On 12 February 2013 15:17, Tasos Bekos notifications@github.com wrote:

A common (& simpler to implement) practice is to add Fisrt and Lastbuttons.

Example output:
[First] [Previous] [1] [2] .....[10] [Next] [Last]

Conditions to disable these button is also simple.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/120#issuecomment-13436974.

[bekos]

I try to make a PR for my suggestion above . I think it is really simple and straightforward to implement.

I added three attributes: firstText, lastText and boundary (whether to display [First] and [Last] buttons).

I also added two scope method selectFirst and selectLast which are called from the two added li elements in the template. These elements have the appropriate methods to be disabled, select page & whether to be visible with ng-show="boundary".

My problem here is the tests. With ng-show the li elements for the added buttons exist but are hidden (default behavior). So i have to change almost every existing test, so that [Previous] equals to 1, Next to -2, page to page + 1 etc.

So i want to ask if there is a way to avoid it. Is there a filter to select only visible elements or a simple method without ui-if from AngularUI that actually removes the element from the DOM instead of hiding it, or any other suggestion.

Thx

[bekos]

I made a PR for this. #159