基于AngularJs的分页控件

最新推荐文章于 2023-10-09 14:08:56 发布

JennyReborn

最新推荐文章于 2023-10-09 14:08:56 发布

阅读量459

点赞数

分类专栏： JAVA_WEB_STRUTS

本文链接：https://blog.csdn.net/u012889441/article/details/79107046

版权

JAVA_WEB_STRUTS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、图片效果

这里写图片描述

这里写图片描述
2、思想

基本思想：
1、页码数字的流动效果
通过个增量increment确立三种状态，1）1~3前三个页面在前三个位置；2）当前页面一直位于最中央；3）（allNumber-3）~allNumber既最后三页，在后3个对应位置。（如上图）
2、当前页面的标注
通过increment的值确立标注，而increment仅由count（当前页面）推算而来

3、使用方法：
count：当前页面的值。
allNumber：页面总值，默认是20。
4、代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>AngularJs分页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
    .beSelected{
        color:white;
        background-color:#87CEFA;
    };
    .noSelected{
        color:black;
        background-color: white;
    }
    .btnPage{
        width:50px;
    } 
    </style>
  </head>
  <body>
    <!-- 分页控件 -->
    <div ng-app="myApp" ng-controller="myCtrl">
        <!-- 分页展示内容 -->
        <div style="width:400px;height:400px;">这里是分页展示内容</div>
        <!-- 分页按钮 -->
        <div>
            <button ng-click="changePage(-10)">首页</button>
            <button ng-click="changePage(-9)">上一页</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive1]" ng-click="changePage(-3)">{{count+increment-3}}</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive2]" ng-click="changePage(-2)">{{count+increment-2}}</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive3]" ng-click="changePage(-1)">{{count+increment-1}}</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive4]" ng-click="changePage(0)">{{count+increment}}</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive5]" ng-click="changePage(1)">{{count+increment+1}}</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive6]" ng-click="changePage(2)">{{count+increment+2}}</button>
            <button class="btnPage" ng-class="{true:'beSelected', false:'noSelected'}[isActive7]" ng-click="changePage(3)">{{count+increment+3}}</button>
            <button ng-click="changePage(9)">下一页</button>
            <button ng-click="changePage(10)">尾页</button>
        </div>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.count = 1;      //起始页数
    $scope.allNumber=20;   //页码总数
    $scope.increment=3;
    $scope.style_1="colorObj";
    $scope.isActive1=true;
    //触发页码显示，这个时候可以向前台请求数据
    $scope.changePage = function(number) {
        //首页
        if(number==-10)
        {
            $scope.count = 1;
        }
        //尾页
        else if(number==10)
        {
            $scope.count = $scope.allNumber;
        }
        else if(number==-9)
        {
            if($scope.count!=1)
            {
                $scope.count=$scope.count-1;
            }
        }
        else if(number==9)
        {
            if($scope.count!=$scope.allNumber)
            {
                $scope.count=$scope.count+1;
            }
        }
        else
        {
            $scope.count=$scope.count+$scope.increment+number;
        }
        //根据count值判断增量，focus相应位置
        if($scope.count<4)
        {
            $scope.increment=4-$scope.count;
        }
        else if($scope.count>$scope.allNumber-3)
        {
            $scope.increment=($scope.allNumber-3)-$scope.count;
        }
        else
        {
            $scope.increment=0;
        }
        //增加选中状态
        $scope.isActive1=false;
        $scope.isActive2=false;
        $scope.isActive3=false;
        $scope.isActive4=false;
        $scope.isActive5=false;
        $scope.isActive6=false;
        $scope.isActive7=false;
        if($scope.increment==3)
        {
            $scope.isActive1=true;
        }
        else if($scope.increment==2)
        {
            $scope.isActive2=true;
        }
        else if($scope.increment==1)
        {
            $scope.isActive3=true;
        }
        else if($scope.increment==0)
        {
            $scope.isActive4=true;
        }
        else if($scope.increment==-1)
        {
            $scope.isActive5=true;
        }
        else if($scope.increment==-2)
        {
            $scope.isActive6=true;
        }
        else if($scope.increment==-3)
        {
            $scope.isActive7=true;
        }
        //写向前台ajax请求count页内容
    };
    });
    //if(count>allNumber)iflag=false;else iflag=true;
    </script>
  </body>
</html>

JennyReborn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于AngularJs的分页控件

1、图片效果 2、思想基本思想： 1、页码数字的流动效果通过个增量increment确立三种状态，1）1~3前三个页面在前三个位置；2）当前页面一直位于最中央；3）（allNumber-3）~allNumber既最后三页，在后3个对应位置。（如上图） 2、当前页面的标注通过increment的值确立标注，而increment仅由count（当前页
复制链接

扫一扫