材質設計：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。 – 2017-03-10 09:52:19

你的代碼是不完整的，所以不能說哪裏和哪裏是錯的，但你可以使用下面的代碼，它工作正常。 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

坦克很多，因爲我是一個新手，我不知道整個圖片。我把你的代碼丟失的部分放在一起，現在它可以工作。 – weber85

代碼筆實際上不起作用。它總是顯示錶中的所有行。 –

材質設計：md-table-pagination不起作用

回答

相關問題