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">
     
  • 相关阅读:
    Dubbo-2.7.3升级-依赖问题
    Foreach删除元素(ArrayList)报错分析
    Dubbo日志打印级别调整
    kafka分区和副本如何分配
    IDEA 不能正确反编译 class /* compile ... */
    Mybatis获取插入数据的主键时,返回值总是1
    python 3.7.2 安装 pycurl 遇到的坑
    安装Web模块tornado,启动一直报ModuleNotFoundError: No module named 'tornado.ioloop'; 'tornado' is not a package
    【C#】HTTP POST 上传图片及参数
    【WPF】将DataGrid内容导出到Excel
  • 原文地址:https://www.cnblogs.com/wyxy2005/p/4660827.html
Copyright © 2011-2022 走看看