가 https://codepen.io/anon/pen/BjvLVJ?editors=1100 I이 방법 매김을 변경할는 표시
에서 생성 된 테이블의 이미지를 고려 MG-테이블 매김 AngularJS와 용 세퍼레이터를 지정한다. 그것은
1-5 (1)과 (5) 사이의 9
공백없이, 세퍼레이터로서 en -dash 표시한다.
은 https://github.com/daniel-nagy/md-data-table#pagination에 따르면, 기능은 아마도 md-label에 위치하지만, 객체에 대한 세 개의 속성 거기해야합니다 of, page 및 rowsPerPage은.
이 방법이 있습니까? https://material.angular.io/components/table/overview#pagination은 솔루션을 제공하지 않습니다.
하나의 솔루션은 사용자 정의 HTML 템플릿으로 md-data-table.js 라이브러리를 수정하는 것입니다. 스크립트를 다운로드
<div class="label">{{$pagination.min()}}–{{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>
전체의 HTML MD-테이블 pagination.html 템플릿
angular.module('md-table-pagination.html', []).run(['$templateCache', function($templateCache) {
$templateCache.put('md-table-pagination.html',
'<div class="page-select" ng-if="$pagination.showPageSelect()">\n' +
' <div class="label">{{$pagination.label.page}}</div>\n' +
'\n' +
' <md-select virtual-page-select total="{{$pagination.pages()}}" class="md-table-select" ng-model="$pagination.page" md-container-class="md-pagination-select" ng-change="$pagination.onPaginationChange()" ng-disabled="$pagination.disabled" aria-label="Page">\n' +
' <md-content>\n' +
' <md-option ng-repeat="page in $pageSelect.pages" ng-value="page">{{page}}</md-option>\n' +
' </md-content>\n' +
' </md-select>\n' +
'</div>\n' +
'\n' +
'<div class="limit-select" ng-if="$pagination.limitOptions">\n' +
' <div class="label">{{$pagination.label.rowsPerPage}}</div>\n' +
'\n' +
' <md-select class="md-table-select" ng-model="$pagination.limit" md-container-class="md-pagination-select" ng-disabled="$pagination.disabled" aria-label="Rows" placeholder="{{ $pagination.limitOptions[0] }}">\n' +
' <md-option ng-repeat="option in $pagination.limitOptions" ng-value="option.value ? $pagination.eval(option.value) : option">{{::option.label ? option.label : option}}</md-option>\n' +
' </md-select>\n' +
'</div>\n' +
'\n' +
'<div class="buttons">\n' +
' <div class="label">{{$pagination.min()}}–{{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>\n' +
'\n' +
' <md-button class="md-icon-button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.first()" ng-disabled="$pagination.disabled || !$pagination.hasPrevious()" aria-label="First">\n' +
' <md-icon md-svg-icon="navigate-first.svg"></md-icon>\n' +
' </md-button>\n' +
'\n' +
' <md-button class="md-icon-button" type="button" ng-click="$pagination.previous()" ng-disabled="$pagination.disabled || !$pagination.hasPrevious()" aria-label="Previous">\n' +
' <md-icon md-svg-icon="navigate-before.svg"></md-icon>\n' +
' </md-button>\n' +
'\n' +
' <md-button class="md-icon-button" type="button" ng-click="$pagination.next()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Next">\n' +
' <md-icon md-svg-icon="navigate-next.svg"></md-icon>\n' +
' </md-button>\n' +
'\n' +
' <md-button class="md-icon-button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.last()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Last">\n' +
' <md-icon md-svg-icon="navigate-last.svg"></md-icon>\n' +
' </md-button>\n' +
'</div>');
}]);