マテリアルデザイン：md-table-paginationが機能しない

テーブルがあり、それにページ番号を付け加えて、各ページに表示されるエントリの数を制限します。テーブルは正常に動作し、次と前のボタンも正常に機能します。問題は、md-table-paginationがmd-limit、md-page、md-totalおよびmd-boundary-linksの数を表示することになっていますが、表示されていないことです。ここは（画像の下にある）改ページと私のテーブルです：マテリアルデザイン：md-table-paginationが機能しない

、ここでページネーションのための私のhtmlコードです：

、ここではそれがどのように見えるかです

<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>

、ここでは私のjavascriptのコードです：

$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); 
    };

提案/助言と回答は非常に高く評価されます。どうもありがとうございます。

出典

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>

はJavaScript

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が機能しない

答えて

関連する問題