Angular Footable (ziscloud) zeigt nur 10 Ergebnisse nach Filterung

Question

Ich benutze Fußablage von Inspinia eckigen Thema, um ein paar Tabellen zu sortieren, die ich habe. Das eigentliche Plugin ist ziscloud eckig footable (hier gefunden https://github.com/ziscloud/angular-footable). Der Tisch hat ca. 50 Einträge, die mit der Zeit immer mehr werden können. In diesem Sinne ist Paginierung der richtige Weg. Ich habe versucht, Seitenumbruch zu verwenden, aber es funktioniert nicht, plus das erste Mal, dass die Tabelle alle Felder lädt und dann die ersten 10 Elemente filtert.

<table class="table table-hover footable toggle-arrow-tiny" data-page-size="8"> 
    <thead> 
     <tr> 
      <th width="2%" data-sort-ignore="true"></th> 
      <th width="15%" data-sort-initial="true">Publish date</th> 
      <th width="15%">Start date</th> 
      <th width="20%">Name</th> 
      <th width="15%" data-sort-ignore="true">Total bookings</th> 
      <th width="23%" data-sort-ignore="true"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr data-ng-repeat="item in vm.pastEducation"> 
      <td class="icon"> 
      <img ng-src="{{ vm.showActivityIcon(item.activity.descriptionText) }}" class="list-icon" alt="{{item.activity.descriptionText}}" title="{{item.activity.descriptionText}}"> 
      </td> 
      <td>{{ item.publishDate == '' ? "" : (item.publishDate | date : "yyyy-MM-dd hh:mm") }}</td> 
      <td>{{ item.startDate | date : "yyyy-MM-dd hh:mm" }}</td> 
      <td>{{ item.name }}</td> 
      <td></td> 
      <td class="align-right buttons"> 
      <button data-ng-click="vm.viewEducation(item.id)" class="btn btn-default btn-xs btn-outline"> 
       Show 
      </button> 
      </td> 
      </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="5"> 
       <ul class="pagination pull-right"></ul> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

Ich habe die richtige js in der Datei config.js enthalten und ich werde nichts in den Controller laden.

Answer 1

Zunächst funktionierte die Paginierung von Anfang an, aber sie tauchte erst auf, nachdem ich auf einen der Tabellenköpfe geklickt hatte und alle Werte sortiert hatte. Was also noch zu tun war, war herauszufinden, wie man die Filterung auslöst, sobald die Tabelle geladen ist. Hier ist die init-Funktion meiner Controller, wo es fertig ist

(function initController() { 
    return educationService.listMin().then(function(data) { 
     vm.ongoingEducation = data.ongoingEducation; 
     vm.pastEducation = data.pastEducation; 
     $timeout(function() { $('table').trigger('footable_redraw'); }, 0); 
    }); 
    })(); 

Diese Funktion $ timeout (function() {$ ('table') Trigger ('footable_redraw.');}, 0); triggert, nachdem dom geladen wurde und löst somit erfolgreich die Filterung aus. Da ich Controller verwende sollte man auch $ timeout am Anfang des Controllers deklarieren.