ng中实现分页功能

1.html

 

               

               
• {{page}}

               

               
• 
                      {{'tur-page' | translate}}
                     
                 

               
• 
                      {{'sure' | translate}}
                 

           

2.js

// 分页(pageTotal：总页数，pageCount:一页的条目数,currentPage:当前页数)
ddpAdminApp.service('Pagination', function () {
    this.page = function (pageTotal, pageCount, currentPage) {
        this.pageNumArray = [];
        var pageStart;
        var pageEnd;
        if (currentPage <= pageCount / 2 + 1) {
            pageStart = 1;
            pageEnd = pageCount;
        } else if (currentPage > pageCount / 2 + 1) {
            pageStart = currentPage - pageCount / 2;
            pageEnd = currentPage + pageCount / 2 - 1;
        }
        // 对pageEnd 进行校验，并重新赋值
        if (pageEnd > pageTotal) {
            pageEnd = pageTotal;
        }
        if (pageEnd <= pageCount) {// 当不足pageNum数目时，要全部显示，所以pageStart要始终置为1
            pageStart = 1;
        }
        for (var i = pageStart; i <= pageEnd; i++) {
            this.pageNumArray.push(i);
        }
        return (this.pageNumArray);
    }

})

3.css

.carListFy {
    float: right;
}


.carListFy > li {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
}


.carListPre {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(../images/page_pre_black.png) no-repeat center center/20px 20px;
}


.carListPage {
    height: 20px;
    min-width: 20px;
    padding: 0 2px;
    cursor: pointer;
    border: 1px solid #dadada;
    color: #27282A;
    text-align: center;
    line-height: 19px;
}


.carListAfter {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(../images/page_aft_black.png) no-repeat center center/20px 20px;
}


.carListPageTo {
    margin-left: 20px;
}


.carListPageTo > span {
    color: #686868;
}


.carListPageTo > input {
    border: 1px solid #dadada;
    width: 30px;
    text-align: center;
    line-height:19px;
}


.carListSure {
    color: #188AE2;
    margin-left: 20px;
    cursor: pointer;
}