Angularjs 分页控件

实现效果:

　　

实现步骤:

 1.分页页面：page.html,页面多余样式，需要自己去除。

<div class="row" ng-show="conf.totalItems > 0">
    <div class="col-md-5 col-sm-12">
        <div class="dataTables_info" id="sample_1_info" role="status" aria-live="polite" ng-show="true">
            <!--Showing 1 to 5 of 25 entries-->
            <!--total {{ conf.numberOfPages }} page,total {{ conf.totalItems }}-->
            the<input type="text" class="form-control input-xsmall input-inline" ng-model="jumpPageNum"
                      ng-keyup="jumpToPage($event)"/>page,
            per page<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "
                            ng-change="changeItemsPerPage()" class="form-control input-xsmall input-inline"></select>
            /total<strong>{{ conf.totalItems }}</strong>item

            <!--A total of {{ conf.numberOfPages }} pages article {{ conf.totalItems }}-->
        </div>
    </div>
    <div class="col-md-7 col-sm-12">
        <div class="dataTables_paginate paging_bootstrap_full_number" id="sample_1_paginate">
            <ul class="pagination" style="visibility: visible;">
                <li ng-click="firstPage()" ng-class="{disabled:isFirst()}"><a href="javascript:" title="first"><i
                        class="fa fa-angle-double-left"></i></a>
                </li>
                <li ng-click="prevPage()" ng-class="{disabled:isFirst()}"><a href="javascript:" title="prev"><i
                        class="fa fa-angle-left"></i></a></li>
                <li ng-repeat="item in pageList track by $index" ng-click="changeCurrentPage(item)"
                    ng-class="{active: item == conf.currentPage, separate: item == '...'}"><a href="javascript:">{{ item
                    }}</a>
                </li>
                <li ng-click="nextPage()" ng-class="{disabled:isEnd()}"><a href="javascript:" title="next"><i
                        class="fa fa-angle-right"></i></a></li>
                <li ng-click="lastPage()" ng-class="{disabled:isEnd()}"><a href="javascript:"
                                                                           title="{{ getText('last') }}"><i
                        class="fa fa-angle-double-right"></i></a></li>
            </ul>
        </div>
    </div>
</div>

View Code