md2/data-table/pagination.html

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

<ul class="md2-pagination" *ngIf="_dataLength > _rowsPerPage"><li [class.disabled]="_activePage <= 1" (click)="_setPage(_activePage - 1)"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></li><li *ngIf="_activePage > 4 && _activePage + 1 > _lastPage" (click)="_setPage(_activePage - 4)">{{_activePage-4}}</li><li *ngIf="_activePage > 3 && _activePage + 2 > _lastPage" (click)="_setPage(_activePage - 3)">{{_activePage-3}}</li><li *ngIf="_activePage > 2" (click)="_setPage(_activePage - 2)">{{_activePage-2}}</li><li *ngIf="_activePage > 1" (click)="_setPage(_activePage - 1)">{{_activePage-1}}</li><li class="active">{{_activePage}}</li><li *ngIf="_activePage + 1 <= _lastPage" (click)="_setPage(_activePage + 1)">{{_activePage+1}}</li><li *ngIf="_activePage + 2 <= _lastPage" (click)="_setPage(_activePage + 2)">{{_activePage+2}}</li><li *ngIf="_activePage + 3 <= _lastPage && _activePage < 3" (click)="_setPage(_activePage + 3)">{{_activePage+3}}</li><li *ngIf="_activePage + 4 <= _lastPage && _activePage < 2" (click)="_setPage(_activePage + 4)">{{_activePage+4}}</li><li [class.disabled]="_activePage >= _lastPage" (click)="_setPage(_activePage + 1)"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></li></ul><div class="md2-rows-select" *ngIf="rowsPerPageSet.length && _dataLength > 0"><label>{{paginationLabel}}</label><md2-select [(ngModel)]="_rowsPerPage" (change)="_setRows($event)"><md2-option *ngFor="let row of rowsPerPageSet" [value]="row">{{row}}</md2-option></md2-select><label>{{getPageDataRangeLabel(_rowsPerPage,_activePage-1, _dataLength)}}</label></div>