htmlangularjsbootstrap-ui

uib-pagination, limit maximum number of visible page buttons


I'm using uib-pagination pretty much successfully, but the data I'm paging right now is massive and as it turns out the number of pages is very large, and so I'm having around 2800+ buttons at the end of my page. I need to somehow give the user the chance to navigate through pages using a smaller number of buttons.

Let's say I need buttons to be [1][2][3][4][5][6][7][8][9][10][Next 10 Pages]...[Previuos 10 Pages][2790][2791][2792][2793][2794][2795][2796][2797][2798][2799][2800]

This is the html

<uib-pagination total-items="SearchCriteria.PageInfo.Total_Items"
                                    items-per-page="SearchCriteria.PageInfo.Pg_sz"
                                    next-text="Next"
                                    previous-text="Previous"
                                    ng-model="SearchCriteria.PageInfo.Pg_no"
                                    class="pagination-sm"
                                    boundary-link-numbers="true"
                                    ng-change="GetPaged()">
                    </uib-pagination>

and this is the component I'm using: ui-bootstrap-tpls-1.0.3.js

Is there any attribute I can use to achieve this?


Solution

  • Use max-size attribute

    <uib-pagination 
          max-size= "maxSizeValue">
     </uib-pagination>