Ändern Sie dynamisch die Seitengröße in dir-paginate in angularjs

Question

Ich benutze dir-paginate in angularjs. Meine Frage ist, sollte ich die Seitengröße dynamisch setzen? Wenn meine Bildschirmauflösungen wie 1280 × 800, 1440 × 900, 1680 × 1050, 1920 × 1200 und 2560 × 1600 sind, sollte sich die Seitengröße entsprechend ändern.

<tr dir-paginate="ClientAppr in filteredPhones = (AllClientApprDtls | filter:search:strict) | itemsPerPage:pageSize" current-page="currentPage"> 
    <td class= "col-md-2">{{ClientAppr.persFullName}}</td> 
    <td class= "col-md-2"> {{ClientAppr.clientName}} </td> 
    <td class= "col-md-1"> {{ClientAppr.activeType}} </td> 
    <td class= "col-md-2"> {{ClientAppr.persOffEmail}} </td> 
    <td class= "col-md-2"> {{ClientAppr.clientRepTypeDesc}} </td> 
</tr> 

In diesem examle ItemsPerPage = pagesize

I Gebenes Seitengröße = 8, dann wird es 8 Artikel pro Seite angezeigt werden soll.

Answer 1

können Sie verwenden. max-size bedingt DEMO PLUNKER (optional, Standard = 9) Geben Sie eine maximale Anzahl an Seitenumbruch-Links an, die angezeigt werden sollen. Der Standardwert ist 9 und das Minimum ist 5 (ein niedrigerer Wert als 5 hat keinen Effekt).

so wird Ihre Paginierung html

<div class="paginationCont"> 
    <dir-pagination-controls max-size="size" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/pagination_ctrls.html"></dir-pagination-controls> 
</div> 

und Skript

var screenWidth = $window.innerWidth; 
    if(screenWidth < 768){ 
     $scope.size=5; 
    } else if (screenWidth >= 768 && screenWidth < 992){ 
     $scope.size=6; 
    }else if (screenWidth >= 991 && screenWidth < 1200){ 
     $scope.size=7; 
    }else if (screenWidth >= 1200){ 
     $scope.size=8; 
    }