Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

Possibility to show/hide the item count in table pagination #507

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Possibility to show/hide the item count in table pagination #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9aa2339
Added option to show/hide the item count in the pagination
Nov 18, 2016
e9cf616
Added description for new mdCountLabel
kaywolter Nov 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,7 @@ You may use Angular's [number](https://docs.angularjs.org/api/ng/filter/number)
| :---------------- | :------------- | :---------- |
| `mdBoundaryLinks` | `[expression]` | Displays first and last page navigation links |
| `mdLabel` | `object` | Change the pagination label (see more below). |
| mdCountLabel | [expression] | Show/hide the item count (1 - m of n). |
| `mdLimit` | `integer` | A row limit. |
| `mdLimitOptions` | `array` | Row limit options (see more below). |
| `mdOnPaginate` | `function` | A callback function for when the page or limit changes. The page is passed as the first argument and the limit is passed as the second argument. |
Expand Down
83 changes: 30 additions & 53 deletions dist/md-data-table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ md-backdrop.md-edit-dialog-backdrop {
z-index: 80;
}
md-edit-dialog {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: fixed;
z-index: 81;
background-color: #f9f9f9;
Expand Down Expand Up @@ -50,57 +48,47 @@ md-edit-dialog > .md-actions .md-button + .md-button {
margin-left: 8px;
}
.md-table-pagination {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
box-sizing: border-box;
padding: 0 24px;
font-size: 12px;
color: rgba(0, 0, 0, 0.54);
border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
.md-table-pagination md-select {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
min-width: 64px;
}
.md-table-pagination md-select:not([disabled]):focus .md-select-value {
color: rgba(0, 0, 0, 0.54);
}
.md-table-pagination md-select .md-select-value {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.md-table-pagination md-select .md-select-value span.md-select-icon {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin-right: -6px !important;
}
.md-table-pagination md-select .md-select-value span.md-select-icon:after {
top: initial;
-webkit-transform: scaleY(0.5) scaleX(1);
transform: scaleY(0.5) scaleX(1);
transform: scaleY(0.5) scaleX(1);
}
.md-table-pagination > * {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
height: 56px;
}
.md-table-pagination > .buttons:not(:first-child),
Expand Down Expand Up @@ -128,22 +116,18 @@ md-select.md-table-select > .md-select-value {
md-select.md-table-select > .md-select-value > span {
display: block;
height: auto;
-webkit-transform: none !important;
transform: none !important;
transform: none !important;
}
md-select.md-table-select > .md-select-value > span > .md-text {
display: inherit;
height: inherit;
-webkit-transform: inherit;
transform: inherit;
transform: inherit;
}
md-select.md-table-select > .md-select-value > span.md-select-icon {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
height: 24px;
margin: 0;
}
Expand Down Expand Up @@ -271,16 +255,13 @@ table.md-table th.md-column md-icon {
table.md-table th.md-column md-icon.md-sort-icon {
color: rgba(0, 0, 0, 0.26);
opacity: 0;
transition: -webkit-transform 0.25s, opacity 0.25s;
transition: transform 0.25s, opacity 0.25s;
}
table.md-table th.md-column md-icon.md-sort-icon.md-asc {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
table.md-table th.md-column md-icon.md-sort-icon.md-desc {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transform: rotate(180deg);
}
table.md-table th.md-column md-icon:not(:first-child) {
margin-left: 8px;
Expand Down Expand Up @@ -368,27 +349,23 @@ table.md-table td.md-cell {
border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
table.md-table td.md-cell.md-numeric md-select {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
table.md-table td.md-cell.md-numeric md-select .md-select-value {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
table.md-table td.md-cell.md-placeholder {
color: rgba(0, 0, 0, 0.26);
}
table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
color: rgba(0, 0, 0, 0.54);
width: 18px;
text-align: right;
}
table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon:after {
-webkit-transform: scaleY(0.4) scaleX(0.8);
transform: scaleY(0.4) scaleX(0.8);
transform: scaleY(0.4) scaleX(0.8);
}
7 changes: 6 additions & 1 deletion dist/md-data-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ angular.module('md-table-pagination.html', []).run(['$templateCache', function($
'</div>\n' +
'\n' +
'<div class="buttons">\n' +
' <div class="label">{{$pagination.min()}} - {{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>\n' +
' <div class="label" ng-if="$pagination.showItemCountLabel()">{{$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' +
Expand Down Expand Up @@ -1356,6 +1356,10 @@ function mdTablePagination() {
return $attrs.mdBoundaryLinks === '' || self.boundaryLinks;
};

self.showItemCountLabel = function() {
return $attrs.mdCountLabel === '' || self.countLabel;
}

self.showPageSelect = function () {
return $attrs.mdPageSelect === '' || self.pageSelect;
};
Expand Down Expand Up @@ -1389,6 +1393,7 @@ function mdTablePagination() {

return {
bindToController: {
countLabel: '=?mdCountLabel',
boundaryLinks: '=?mdBoundaryLinks',
disabled: '=ngDisabled',
limit: '=mdLimit',
Expand Down
2 changes: 1 addition & 1 deletion dist/md-data-table.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/md-data-table.min.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/scripts/mdTablePagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ function mdTablePagination() {
return $attrs.mdBoundaryLinks === '' || self.boundaryLinks;
};

self.showItemCountLabel = function() {
return $attrs.mdCountLabel === '' || self.countLabel;
}

self.showPageSelect = function () {
return $attrs.mdPageSelect === '' || self.pageSelect;
};
Expand Down Expand Up @@ -111,6 +115,7 @@ function mdTablePagination() {

return {
bindToController: {
countLabel: '=?mdCountLabel',
boundaryLinks: '=?mdBoundaryLinks',
disabled: '=ngDisabled',
limit: '=mdLimit',
Expand Down
2 changes: 1 addition & 1 deletion src/templates/md-table-pagination.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</div>

<div class="buttons">
<div class="label">{{$pagination.min()}} - {{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>
<div class="label" ng-if="$pagination.showItemCountLabel()">{{$pagination.min()}} - {{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>

<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">
<md-icon md-svg-icon="navigate-first.svg"></md-icon>
Expand Down