在 AngularJS 中实现表格分页布局

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

在 AngularJS 中实现表格分页布局

作者：迹忆客最近更新：2023/04/12 浏览次数：

本文将介绍 AngularJS 中的表格分页布局，并引导您完成在数据中实现它的步骤。

AngularJS 中的表格分页布局

表格分页是 AngularJS 中的一项基本功能，对于任何显示数据列表（例如库存或产品目录）的应用程序都是必需的。

它允许用户在一页上滚动浏览大量数据，而不是一次单击一页，提供适合移动设备的易于阅读的布局。

表格分页让您可以将表格分成多个部分并对其进行分页，从而将长表格分解为更小、更易于管理的块，以便读者有效地扫描信息。

它提供了一组指令来实现和一些实用函数和过滤器来简化配置表的任务。

主要是利用 ng-repeat 创建表格的分页功能，生成数据列表，循环遍历数据，显示在表格中。它还具有 ng-click 指令，可在单击每一行时触发事件。

在 AngularJS 中实现表格分页布局的步骤

AngularJS 表格分页是对水平或垂直表格中的数据进行分页的绝佳方式。 AngularJS 表分页最常见的用例是提供一种有效的方式来查看和导航大型数据表。

我们可以将它用于静态和动态数据。它还允许您实现排序、过滤和搜索功能。

实现 AngularJS 表格分页有四个步骤：

以 JSON 格式加载数据并将其存储在名为 data 的变量中。
创建一个控制器并将该变量分配给一个名为数据的范围变量。
创建一个将生成分页链接的 AngularJS 工厂，将它们添加到控制器的范围，并将它们作为链接数组的对象返回，分别带有页码和页数。工厂还将定义您要使用的分页链接类型（表格、树、列表）以及一页上显示的项目数（页面大小）。
在表格内每一行的底部添加一个分页按钮。

让我们讨论一个例子来更好地理解 AngularJS 中的表格分页。

HTML 代码:

<!DOCTYPE html>
<html>
    <head>
        <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
        <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
        <script src="services.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
        <div ng-app="paginationApp">
            <div style="margin-left:5px;margin-top:10px" ng-controller="mainCtrl">
                <pgn-table conf="config"></pgn-table>
            </div>
        </div>
    </body>
</html>

JavaScript 代码:

var myApp = angular.module('paginationApp');
myApp.controller('mainCtrl', function($scope,demo) {
    demo.then(function(data){
    $scope.config.myData=data;
    });
    $scope.config = {
        heads: ['name', 'age']
    };
});
myApp.directive('pgnTable', ['$compile',
    function($compile) {
        return {
            restrict: 'E',
            templateUrl: 'Sample.html',
            replace: true,
            scope: {
                conf: "="
            },
            controller: function($scope) {
            $scope.currentPage=1;
            $scope.numLimit=6;
            $scope.start = 0;
            $scope.$watch('conf.myData',function(newVal){
                if(newVal){
                    $scope.pages=Math.ceil($scope.conf.myData.length/$scope.numLimit);
                }
            });
            $scope.hideNext=function(){
                if(($scope.start+ $scope.numLimit) < $scope.conf.myData.length){
                    return false;
                }
                else
                    return true;
                };
            $scope.hidePrev=function(){
                if($scope.start===0){
                    return true;
                }
                else
                    return false;
            };
            $scope.nextPage=function(){
                console.log("next pages");
                $scope.currentPage++;
                $scope.start=$scope.start+ $scope.numLimit;
                console.log( $scope.start)
            };
            $scope.PrevPage=function(){
                if($scope.currentPage>1){
                    $scope.currentPage--;
                }
                console.log("next pages");
                $scope.start=$scope.start - $scope.numLimit;
                console.log( $scope.start)
            };
            },
            compile: function(elem) {
                return function(ielem, $scope) {
                    $compile(ielem)($scope);
                };
            }
        };
    }
]);

之后，我们在表中使用以下随机信息。

{
    "demo": [{
        "name": "Adil",
        "age": 21
    }, {
        "name": "Steve",
        "age": 34
    }, {
        "name": "John",
        "age": 23
    }, {
        "name": "Awaq",
        "age": 22
    }, {
        "name": "Bernard",
        "age": 26
    }, {
        "name": "Naiman",
        "age": 23
    }, {
        "name": "Rotan",
        "age": 45
    }, {
        "name": "David",
        "age": 32
    }, {
        "name": "Jade",
        "age": 32
    }, {
        "name": "Reven",
        "age": 22
    }, {
        "name": "Philp",
        "age": 28
    }, {
        "name": "Salt",
        "age": 38
    }]
}

上一篇：Angular CLI Webpack 配置

下一篇：Angular 中的单页应用程序

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：