angularUtils icon indicating copy to clipboard operation
angularUtils copied to clipboard

optional '...' and last/first page button

Open Dwargh opened this issue 9 years ago • 1 comments

I'd like to have the option do disable the first and last page buttons and to then also remove the '...' "pages"

so instead of [<<][<][1][...][4][(5)][6][...][10][>][>>] I would get [<<][<][2][3][4][(5)][6][7][8][>][>>]

if I had max-size set to 7 (and 5th page selected)

in any case, when having the boundary buttons the [first page][...] .... [...][last page] buttons are unnecessary, the only thing they bring to the table is a display of the max number of pages.

Sure I can rewrite the template to the following to get what I want, but it's not pretty:

<ul class="pagination" ng-if="1 < pages.length || !autoHide">
    <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
        <a href="" ng-click="setCurrent(1)"><b>&laquo;</b></a>
    </li>
    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
        <a href="" ng-click="setCurrent(pagination.current - 1)"><b class="glyphicon glyphicon-chevron-left"></b></a>
    </li>
    <li ui-sref-active="active">
        <a href="" ng-if="pagination.last>maxSize&&pagination.current > maxSize/2+1" ng-click="setCurrent((pagination.last-maxSize/2+1>pagination.current)?(pagination.current-3):(pagination.last+1-maxSize))">
            {{pagination.last-maxSize/2+1>pagination.current?pagination.current-3:pagination.last+1-maxSize}}</a>
    </li>
    <li ui-sref-active="active">
        <a href="" ng-if="pagination.last>maxSize&&pagination.current > maxSize/2+1" ng-click="setCurrent((pagination.last-maxSize/2+1>pagination.current)?(pagination.current-2):(pagination.last+2-maxSize))">
            {{pagination.last-maxSize/2+1>pagination.current?pagination.current-2:pagination.last+2-maxSize}}</a>
    </li>
    <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" 
        ng-class="{ active : pagination.current == pageNumber, hidden : ((pageNumber == '...')||pagination.last>maxSize&&((pageNumber<pagination.current-1&&pagination.current>maxSize/2+1&&pagination.current<pagination.last-maxSize/2)||(pageNumber>pagination.current+1&&pagination.current<pagination.last-maxSize/2&&pagination.current>maxSize/2)||pagination.current<maxSize/2&&pageNumber>=pagination.last-1||pagination.current>maxSize/2+1&&pageNumber<=2))}">
        <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
    </li>
    <li ui-sref-active="active">
        <a href="" ng-if="pagination.last>maxSize&&pagination.current <= (pagination.last-maxSize/2)" ng-click="setCurrent((pagination.current>maxSize/2+1)?(pagination.current+2):(maxSize-1))">
            {{pagination.current>maxSize/2+1?pagination.current+2:maxSize-1}}</a>
    </li>
    <li ui-sref-active="active">
        <a href="" ng-if="pagination.last>maxSize&&pagination.current <= (pagination.last-maxSize/2)"
           ng-click="setCurrent((pagination.current>maxSize/2+1)?(pagination.current+3):maxSize)">
            {{pagination.current>maxSize/2+1?pagination.current+3:maxSize}}</a>
    </li>
    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
        <a href="" ng-click="setCurrent(pagination.current + 1)"><b class="glyphicon glyphicon-chevron-right"></b></a>
    </li>
    <li ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }">
        <a href="" ng-click="setCurrent(pagination.last)"><b>&raquo;</b></a>
    </li>
</ul>

Dwargh avatar Jan 27 '16 12:01 Dwargh

Hi,

Thanks for the suggestion. Right now I do not have time to work on this, though I would very much welcome a pull request if you (or anyone else) feels up to it.

I agree that the custom template is a bit verbose and hacky but at least you have a work-around.

michaelbromley avatar Feb 19 '16 08:02 michaelbromley