머티리얼 디자인 : md-table-pagination이 작동하지 않습니다.

테이블이 있으며 페이지 매김을 추가했으며 모든 페이지에 표시되는 항목 수에 제한을 두었습니다. 테이블이 잘 작동하고 다음 및 이전 버튼도 잘 작동합니다. 문제는 md-table-pagination이 md-limit, md-page 및 md-total과 md-boundary-links의 수를 표시한다고 가정하지만 표시되지 않습니다. 다음 (이미지 하단에) 페이지 매김 내 테이블입니다 : 여기 머티리얼 디자인 : md-table-pagination이 작동하지 않습니다.

와는 어떻게 보일지입니다 :

여기 매김 내 HTML 코드입니다 :

$scope.options = { 
    boundaryLinks: true 
}; 

$scope.query = { 
    order: 'customer', 
    limit: 5, 
    page: 1 
}; 

$scope.logPagination = function (page, limit) { 
     console.log('page: ', page); 
     console.log('limit: ', limit); 
    };

<md-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{guestData.count}}" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"> 
        </md-table-pagination>

여기 내 자바 스크립트 코드

모든 제안/조언 및 답변을 주시면 감사하겠습니다. 정말 고맙습니다.

출처

2016-09-23 Ryu Roble

당신은 이것에 대한 어떤 해답을 발견 했는가? – weber85

아니요, 아직 이에 대한 적절한 해결책을 찾지 못했습니다 –

@ weber85 내 대답을 확인하십시오. –

코드가 불완전하여 어디서 무엇이 잘못되었는지는 말할 수 없지만 아래 코드를 사용하면 정상적으로 작동합니다. Here-Codepen이 작동하는 예입니다.

HTML

<html lang="en" ng-app="demoApp"> 

    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
    <link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css"> 
    </head> 

    <body layout="column"> 
    <md-content laout="column" flex ng-controller="hotelController"> 
     <md-table-container> 
      <table md-table md-row-select="options.rowSelection" ng-model="selected" md-progress="promise"> 
      <thead md-head md-order="query.order" md-on-reorder="logOrder"> 
       <tr md-row> 
       <th md-column><span>Customer</span></th> 
       <th md-column><span>Check-in-time</span></th> 
       <th md-column><span>Check-out-time</span></th> 
       <th md-column><span>Room Type</span></th> 
       </tr> 
      </thead> 
      <tbody md-body> 
       <tr md-row md-select="guest" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="guest in guests.data"> 
       <td md-cell>{{guest.customer}}</td> 
       <td md-cell>{{guest.checkInTime}}</td> 
       <td md-cell>{{guest.checkOutTime}}</td> 
       <td md-cell>{{guest.fat}}</td> 

       </tr> 
      </tbody> 
      </table> 
     </md-table-container> 

     <md-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{guests.count}}" md-page-select="options.pageSelector" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"></md-table-pagination> 
     </md-card> 
    </md-content> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
    <script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script> 

    </body> 
</html>

자바 스크립트

angular.module('demoApp', ['ngMaterial', 'md.data.table']) 

    .controller('hotelController', ['$mdEditDialog', '$q', '$scope', '$timeout', function ($mdEditDialog, $q, $scope, $timeout) { 
    'use strict'; 

    $scope.selected = []; 

    $scope.options = { 
    //autoSelect: true, 
    boundaryLinks: true, 
    //largeEditDialog: true, 
    //pageSelector: true, 
    rowSelection: true 
    }; 

    $scope.query = { 
    order: 'name', 
    limit: 5, 
    page: 1 
    }; 

    $scope.guests = { 
    "count": 10, 
    "data": [ 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     }, 
     { 
     "customer": "ABC", 
     "checkInTime": "10-0-15", 
     "checkOutTime": "11-0-15", 
     "fat": "double" 
     } 
    ] 
    }; 



    $scope.logPagination = function (page, limit) { 
    console.log('page: ', page); 
    console.log('limit: ', limit); 
    } 
}]);

출처

2017-03-10 09:50:47

tanx 나는 뉴비 였기 때문에 전체 그림을 알지 못했습니다. 나는 당신 코드를 사용하여 코드의 누락 부분을 모으고 이제는 작동합니다. – weber85

코드 펜이 실제로 작동하지 않습니다. 항상 테이블의 모든 행을 표시합니다. –

머티리얼 디자인 : md-table-pagination이 작동하지 않습니다.

답변

관련 문제