DataTable - Simple table component with sorting, pagination, and row select/multi-select for Angular2
7
stars
7
forks
source link
Need previous ,next in addition to first and last in the pagination and we should be able to change the deisgn of the pagination #23
Open
sridharlatentview opened 7 years ago
@sridharlatentview Temporary hack to style pagination by using latest bootstrap classes. Replace this code in /node_modules/BootstrapPaginator.js
template: "\n <mfPaginator #p [mfTable]=\"mfTable\">\n <nav aria-label=\"page pagination\" class=\"mt-4\" *ngIf=\"p.dataLength > p.rowsOnPage\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\" [class.disabled]=\"p.activePage <= 1\" (click)=\"p.setPage(1)\">\n <a class=\"page-link\" style=\"cursor: pointer\">«</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage > 4 && p.activePage + 1 > p.lastPage\" (click)=\"p.setPage(p.activePage - 4)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage-4}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage > 3 && p.activePage + 2 > p.lastPage\" (click)=\"p.setPage(p.activePage - 3)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage-3}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage > 2\" (click)=\"p.setPage(p.activePage - 2)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage-2}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage > 1\" (click)=\"p.setPage(p.activePage - 1)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage-1}}</a>\n </li>\n <li class=\"page-item active\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage + 1 <= p.lastPage\" (click)=\"p.setPage(p.activePage + 1)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage+1}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage + 2 <= p.lastPage\" (click)=\"p.setPage(p.activePage + 2)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage+2}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage + 3 <= p.lastPage && p.activePage < 3\" (click)=\"p.setPage(p.activePage + 3)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage+3}}</a>\n </li>\n <li class=\"page-item\" *ngIf=\"p.activePage + 4 <= p.lastPage && p.activePage < 2\" (click)=\"p.setPage(p.activePage + 4)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{p.activePage+4}}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"p.activePage >= p.lastPage\" (click)=\"p.setPage(p.lastPage)\">\n <a class=\"page-link\" style=\"cursor: pointer\">»</a>\n </li>\n </ul>\n </nav>\n <nav *ngIf=\"p.dataLength > minRowsOnPage\">\n <ul class=\"pagination pull-right\">\n <li *ngFor=\"let rows of rowsOnPageSet\" [class.active]=\"p.rowsOnPage===rows\" (click)=\"p.setRowsOnPage(rows)\">\n <a class=\"page-link\" style=\"cursor: pointer\">{{rows}}</a>\n </li>\n </ul>\n </nav>\n </mfPaginator>\n "