zoukankan      html  css  js  c++  java
  • angularjs 分页精华代码

    //pageinfo
    $scope.pageSize=10;
    $scope.currentType={{ current_type }};
    $scope.currentPage={{ json_encode(current_page) }};
    $scope.totalPage={{ json_encode(total_page) }};
    $scope.pages = [];//分页数组
    //下面3句是分页核心
    var viewCount = 7;
    var firstIdx = ($scope.currentPage<=parseInt(viewCount/2)+1?1:($scope.currentPage-parseInt(viewCount/2)));
    var lastIndex = (firstIdx+viewCount-1>=$scope.totalPage?$scope.totalPage:firstIdx+viewCount-1);
    if(lastIndex>=$scope.totalPage){
    lastIndex = $scope.totalPage;
    firstIndex = lastIndex - viewCount+1;
    }
    $scope.lastPage = lastIndex;
    if(firstIdx<1){
    firstIdx=1;
    }
    while(firstIdx<=lastIndex&&$scope.totalPage>1){
    $scope.pages.push(firstIdx);
    firstIdx++;
    }

    ------------
    注:
    viewCount 指显示的页码数量,如(上一页,2,3,4,5,6,7,8,下一页)
    viewCount = 7
    测试结果
    输入当前页码1,总页数1 ,显示页码标签 $scope.pages = [];
    输入当前页码1,总页数2 ,显示页码标签 $scope.pages = [1,2];
    输入当前页码1,总页数3 ,显示页码标签 $scope.pages = [1,2,3];
    输入当前页码1,总页数4 ,显示页码标签 $scope.pages = [1,2,3,4];
    输入当前页码1,总页数5 ,显示页码标签 $scope.pages = [1,2,3,4,5];
    输入当前页码1,总页数6 ,显示页码标签 $scope.pages = [1,2,3,4,5,6];
    输入当前页码1,总页数7 ,显示页码标签 $scope.pages = [1,2,3,4,5,6,7];
    输入当前页码5,总页数8 ,显示页码标签 $scope.pages = [2,3,4,5,6,7,8];
    输入当前页码6,总页数9 ,显示页码标签 $scope.pages = [3,4,5,6,7,8,9];
    输入当前页码7,总页数8 ,显示页码标签 $scope.pages = [4,5,6,7,8];


    angularjs 的directive定义
    .directive('noenter',function() {
    return function(scope, element) {
    element.on('keypress', function(e) {
    if (e.which === 13) {
    var page = element.val();
    if(page>=1&&page<=scope.totalPage){
    return scope.getData(page);
    }else{
    alert('输入页码超出范围!');
    }
    }
    return true;
    })
    }
    })

    使用:
    <input type="text" noenter class="goto-page">
     
  • 相关阅读:
    docker架构的详解
    docker的核心原理-cgroup
    网络运维面试题
    100道linux运维笔试题
    运维岗位面试题集合
    python——筛子游戏
    同道前辈
    delphi中使用SocketStream读写数据的技巧
    百度地图API
    HTML中小meta的大作用
  • 原文地址:https://www.cnblogs.com/wyxy2005/p/4660827.html
Copyright © 2011-2022 走看看