2015-02-21 9 views
6

Ich habe eine intelligente Tabelle, an der ich in AngularJS arbeite. Die Tabelle verwendet eine benutzerdefinierte Pipe, um ihre Daten zu suchen und zu sortieren. Ich benötige auch, dass die Tabelle funktionierende Paginierung hat, zusammen mit einem Dropdown-Feld, so dass Sie die Anzahl der anzuzeigenden Zeilen auswählen können (denken Sie an Databases).Smart Tables Paginierung funktioniert nicht mit serverseitiger Filterung

Zum Suchen und Sortieren feuert das benutzerdefinierte Rohr meine AJAX-Anfragen problemlos ab. Wenn ich jedoch auf eine der Seitennummern klicke oder die Anzahl der anzuzeigenden Zeilen ändere, wird die Pipe NICHT ausgelöst.

Die Seitenzahlen scheinen auf setPage (Seite) zu setzen (dies wird durch die Anweisung st-Pagination festgelegt), aber nichts passiert - und es werden keine Fehler ausgegeben.

Wie kann ich die benutzerdefinierte Pipe auslösen, wenn sich die Anzahl der angezeigten Zeilen ändert oder wenn in den Paginierungssteuerelementen auf eine Seite # geklickt wird?

Hier ist mein HTML:

<table class="table table-striped table-bordered" st-table="leadsCollection" st-safe-src="leads" st-pipe="serverFilter"> 
... 
<tbody> 
    <tr data-toggle="modal" data-target="#modal-source" ng-repeat="source in leadsCollection" ng-click="rowClick($index);"> 
     <td>{{source.leaddate}}</td> 
     <td>{{(source.distance > 100) ? 'Long Distance' : 'Local'}}</td> 
     <td>{{source.origin_city}}, {{source.origin_state}}</td> 
     <td>{{source.destination_city}}, {{source.destination_state}}</td> 
     <td>{{source.est_move_date}}</td> 
     <td>{{source.distance}} mi</td> 
     <td>{{source.number_bedrooms}} br</td> 
     <td></td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
    <td colspan="8"> 
     <div class="form-group col-md-1"> 
      <label>Show:</label> <select class="form-control" ng-model="itemsByPage"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> 
     </div> 
     <div class="pull-right" st-pagination="" st-items-by-page="itemsByPage"></div> 
    </td> 
    </tr> 
</tfoot> 
</table> 

Und hier ist der Controller:

.controller('Leads', function ($scope, $http) { 
$scope.leads = []; 
$scope.leadsCollection = [].concat($scope.leads); 
$scope.itemsByPage = "10"; 

$scope.rowClick = function (idx) 
{ 
    $scope.editor = $scope.leads[idx]; 
} 

$scope.serverFilter = function(tablestate) 
{ 
    $http.post("/portal/api/loadleads",tablestate).success(function(response){ 
     console.log(response); 
     $scope.leads = response; 
     $scope.leadsCollection = [].concat($scope.leads); 
    }); 
} 

}) 
+0

Haben Sie das jemals gelöst? Ich habe anscheinend das selbe Problem und probierte auch die 'tableState.pagination.numberOfPages', um die eine Antwort ohne Verbesserungsvorschläge zu korrigieren. – Randyaa

+0

tat ich. Die folgende Lösung war meine endgültige Lösung. – MediaGiantDesign

Antwort

3

Um Smart-Tabellen zu erhalten, die Filter feuern, um die NumberOfPages auf Datenlast einstellen müssen . Um den oben genannten Filter an der Arbeit einfach hinzufügen:

tablestate.pagination.numberOfPages = response.totalPages; 

Smart-Tabellen scheinen dies zu erfordern, um zu setzen, damit sie richtig, um die Ereignisse zu binden.

Verwandte Themen