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">
     
  • 相关阅读:
    TP5常用函数总结1
    swiper 自定义的一些需求
    jQuery 点击元素以外任意地方隐藏该元素
    fastadmin中编辑时的fieldlist选项类型,如何跟数据库里的保持一致,并且显示匹配的样式
    leetcode——63. 不同路径 II
    leetcode——62.不同路径
    数组标签结束,下一个标签,动态规划
    leetcode——48. 旋转图像
    leetcode——45. 跳跃游戏 II
    leetcode——41. 缺失的第一个正数
  • 原文地址:https://www.cnblogs.com/wyxy2005/p/4660827.html
Copyright © 2011-2022 走看看