webentwicklung-frage-antwort-db.com.de

Wie erreicht man mit Angular.js ein Paginierungs- / Tabellenlayout?

Angenommen, ich erhalte ein Objektliteral mit mehr als 15 Objekten und muss sie in einem ansprechenden Layout anzeigen (nicht alle in einer Reihe). Was ist die effizienteste Methode, um zu steuern, wann die Zeile umbrechen/die Seite enden soll?

Im Moment benutze ich ng-repeat für Tabellenzeilen und das Ergebnis ist eine lange, dünne Tabelle mit einer Spalte.

Zur Verdeutlichung bearbeiten. Könnte Objekte innerhalb von Objekten/mehr Parametern haben. Hier ist mein Objekt:

$scope.zones = [
        {"name": "Zone 1",
         "activity": "1"},
        {"name": "Zone 2",
         "activity": "1"},
        {"name": "Zone 3",
         "activity": "0"},
        {"name": "Zone 4",
         "activity": "0"},
        {"name": "Zone 5",
         "activity": "0"},
        {"name": "Zone 6",
         "activity": "0"},
        {"name": "Zone 7",
         "activity": "1"},
        {"name": "Zone 8",
         "activity": "0"},
        {"name": "Zone 9",
         "activity": "0"},
        {"name": "Zone 10",
         "activity": "0"},
        {"name": "Zone 11",
         "activity": "1"},
        {"name": "Zone 12",
         "activity": "1"},
        {"name": "Zone 13",
         "activity": "0"},
        {"name": "Zone 14",
         "activity": "0"},
        {"name": "Zone 15",
         "activity": "1"},
    ];
36

Ich würde Tabelle verwenden und die Paginierung im Controller implementieren, um zu steuern, wie viel angezeigt wird, und Schaltflächen, um zur nächsten Seite zu wechseln. This Fiddle könnte dir helfen.

example of the pagination

 <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                        <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
                        <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
                        <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
                        <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
                        <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
                        <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
                    </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                                <li ng-repeat="n in range(pagedItems.length)"
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>
                <tbody>
                    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.field3}}</td>
                        <td>{{item.field4}}</td>
                        <td>{{item.field5}}</td>
                    </tr>
                </tbody>
            </table> 

die $ scope.range im Geigen-Beispiel sollte sein:

$scope.range = function (size,start, end) {
    var ret = [];        
    console.log(size,start, end);

       if (size < end) {
        end = size;
        if(size<$scope.gap){
             start = 0;
        }else{
             start = size-$scope.gap;
        }

    }
    for (var i = start; i < end; i++) {
        ret.Push(i);
    }        
     console.log(ret);        
    return ret;
};
70
Maxim Shoustin

Dies ist das einfachste Beispiel, das ich für die Paginierung gefunden habe! http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

15
Santosh

Ich benutze diese Lösung:

Es ist ein bisschen prägnanter, da ich benutze: ng-repeat="obj in objects | filter : paginate", um die Zeilen zu filtern. Es funktionierte auch mit $ resource:

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

13
Nuno Silva

Hier ist meine Lösung. Die Lösung von @Maxim Shoustin hat Probleme beim Sortieren. Ich wickle das Ganze auch in eine Direktive ein. Die einzige Abhängigkeit ist UI.Bootstrap.pagination, die bei der Paginierung großartige Arbeit geleistet hat.

Hier ist der Plunker

Hier ist der Github-Quellcode.

8
maxisam

hier habe ich mein AngularJS-Paginierungsproblem mit ein paar weiteren Änderungen an der Serverseite und am Ansichtsende gelöst. Sie können den Code überprüfen, der effizienter sein wird. Alles, was ich tun muss, ist, zwei Werte für Startnummer und Endnummer einzugeben. Es wird den Index des zurückgegebenen JSON-Arrays darstellen.

hier ist der Winkel

var refresh = function () {
    $('.loading').show();
    $http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) {
        $scope.devices = response;


        $('.loading').hide();
    });
};

wenn Sie sorgfältig $ scope.CountStart und $ scope.CountStart sehen, sind zwei Argumente, die ich mit dem API übergebe

hier ist der Code für die nächste Schaltfläche

$scope.nextPage = function () {
    $('.loading').css("display", "block");
    $scope.nextPageDisabled();


    if ($scope.currentPage >= 0) {
        $scope.currentPage++;

        $scope.CountStart = $scope.CountStart + $scope.DevicePerPage;
        $scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage;
        refresh();
    }
};

hier ist der Code für die vorherige Schaltfläche

$scope.prevPage = function () {
    $('.loading').css("display", "block");
    $scope.nextPageDisabled();

    if ($scope.currentPage > 0) {
        $scope.currentPage--;

        $scope.CountStart = $scope.CountStart - $scope.DevicePerPage;
        $scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage;

        refresh();

    }
};

wenn die Seitenzahl Null ist, wird meine vorherige Schaltfläche deaktiviert

   $scope.nextPageDisabled = function () {

    console.log($scope.currentPage);

    if ($scope.currentPage === 0) {
        return false;
    } else {
        return true;
    }
};
7
nur farazi

Tabelle mit Papieren , Sortieren und Filter

enter image description here

Ein vollständiges Beispiel finden Sie unter Angularjs-Tabellensortierungsfilter und Paging

2
Lewis Hai

Die beste einfache Plug-and-Play-Lösung für die Paginierung.

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

sie müssten ng-repeat durch eine benutzerdefinierte Direktive ersetzen.

<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>

Innerhalb der Seite müssen Sie nur hinzufügen

<div align="center">
       <dir-pagination-controls
            max-size="100"
            direction-links="true"
            boundary-links="true" >
       </dir-pagination-controls>
</div>

In deine index.html laden

<script src="./js/dirPagination.js"></script>

Fügen Sie in Ihrem Modul nur Abhängigkeiten hinzu

angular.module('userApp',['angularUtils.directives.dirPagination']);

und das ist alles für die Paginierung benötigt.

Könnte für jemanden hilfreich sein.

2
Hema