Question

我有一张桌子，我在其上添加了分页，并限制了每页中显示的条目数量。该表工作正常，下一个和上一个按钮工作正常。问题是md-table-pagination应该显示md-limit，md-page和md-total以及md-boundary-links的数量但不显示。这是我的分页表（在图片的底部）：

以下是它的样子：

这是我的分页的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);
    };

任何建议/建议和答案将不胜感激。非常感谢你。

Answer 1

您的代码不完整，因此无法说明错误的位置和错误，但您可以使用下面的代码并且工作正常。 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);
  }
}]);

Answer 2

HTML 在上面的代码中发现了一个问题，它没有按照query.page来显示表中的所有记录。在这里我修复了它

<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="https://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 |limitTo: query.limit : (query.page -1) * query.limit">
    <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="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>

    </body>
    </html>

JAVA脚本

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 2",
        "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);
  }
}]);

材料设计：md-table-pagination不起作用

2 个答案: