Ich arbeite daran, eine eckige Paginierung für eine Tabelle einzurichten, die ich erstelle.

Ich habe die Dokumente durchgearbeitet. Ich verstehe jedoch nicht, wie ich die Paginierung mit der Tabelle verbinden kann. Meine Paginierungsgröße stimmt mit der Arraygröße überein. Es gibt die richtige Anzahl von Schaltflächenlinks, um die Seitenlänge zu bestimmen. Mein Tisch ist jedoch immer noch in voller Länge, sodass ich meine Paginierung nicht testen kann.

Hier ist mein Tischkörper

     <tbody>
                <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"> 
                    <td>[[drink.name]]</td>
                    <td>[[drink.date |date: format :timezone]]</td>
                    <td>[[drink.caffeineLevel]]</td>
                    <td>
                        <a ng-click="delete(drink._id)">
                            <i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>
                        </a>

                        <a href="" ng-click="update(drink)">
                            <i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
                        </a>
                    </td>
                </tr>
     </tbody>

Ich habe meinen Tischkörper außerhalb des @ gesettable tag Ich habe es im Inneren versucht, aber meine Paginierungssteuerelemente wurden nicht angezeigt.

Hier ist meine Paginierung

<pagination  
        total-items="totalItems" 
        ng-model="currentPage" 
        items-per-page="itemsPerPage" 
        ng-change="pageChanged()" 
        ng-click="setPage(currentPage)">
</pagination>

Ich habe auch ein @ eingerichtp-Tag, um sicherzustellen, dass die Registerkarten reagieren

   <div> 
        <p>total Items [[totalItems]]</p>
        <p>itemsPerPage [[itemsPerPage]]</p>
        <p>current page [[currentPage]]</p>
    </div>

Die gesamten Elemente, Elemente pro Seite und die aktuelle Seite innerhalb des Absatzes reagieren alle auf jeden Klick auf den Paginierungs-Controller. Die Tabelle ändert sich jedoch nicht.

Hier ist mein Controller

var editabledrinkSet = function(){
      editableArray = [];

      DrinkLibrary.getAllDrinks().success(function(data){
        for (var i = 0; i < data.length; i++) {
          if(data[i].editable) {
            editableArray.push(data[i])
          };
        };
        $scope.currentPage = 1;
        $scope.totalItems = editableArray.length;

        $scope.itemsPerPage =10;
        $scope.maxSize = 3;

        $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
        }
        $scope.pageChanged = function() {
          $log.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.editableDrinkList = editableArray;
      });
    }; 

Wenn ich es zum Laufen bringe, werde ich das meiste davon in eine Direktive umwandeln. Ich möchte es nur zuerst einrichten.