ovh-angular-pagination-front
v7.0.0
Published
Angular directive to paginate in front end
Downloads
32
Readme
ovh-angular-pagination-front
Angular directive to paginate in front end
data-ovh-angular-pagination-front the directive tag
data-items="tasksId" required all item to paginate
data-paginated-items="tasksDetails" required readonly item show in the current page
data-current-page="currentPage" optional the current page to show / shown
data-nb-pages="nbPages" optional readonly total pages
data-items-per-page="itemsPerPage" required defines items per page
data-transform-item="transformItem(item)" optional function to transform showed item
data-on-transform-item-get-promise="getPromise(promise)" optional, arguments must be named "promise" to get the promise
data-on-transform-item-notify="onTransformItemNotify(item)" optional, argument must be named item to do job on modification
data-on-transform-item-done="onTransformItemDone(items)" optional, argument must be name items to do jop after all transformation
data-page-placeholder="{{tr('pagination_page', [currentPage, nbPages])}}" required label for select page
data-item-per-page-placeholder="{{tr('pagination_display')}}" required label for item per page
data-refresh="launchRefresh" optional if launchRefresh change, table reload details
data-go-to-page="false" optional if set, input field to change page will not be displayed
Dependances
- ui.bootstrap : use for pagination. Visit angular-ui bootstrap
example
app module
angular.module("app", [...,'ovh-angular-pagination-front',....];
js controller
angular.module('controllers').controller('controllers.Domain.Tasks',
['$scope', 'Domain', '$filter',
function ($scope, Domain) {
"use strict";
// Set items count by page
$scope.itemsPerPage = 10;
$scope.tasksId = [];
$scope.tasksDetails = [];
// To load a specifique page
$scope.currentPage = 5;
$scope.loaders = {
tasks : true
};
/*
* First get all id
*/
Domain.getTasks().then(function (tasks) {
$scope.tasksId = tasks;
});
/*
* if you want transform item must return transformated item
* item is the current item to transform
*/
$scope.transformItem = function (item) {
console.log('transform item', item);
return Domain.getTask(item); //please do not forget .$promise if you use $Ressource
};
/*
* call when a item of current page is transformed
* taskDetails contains the transformated items
*/
$scope.onTransformItemNotify = function (taskDetails) {
console.log('onTransformItemNotify', taskDetails);
$scope.tasksDetails.push(taskDetails);
};
/*
* call when all item of current page are transformed
* tasksDetails contains transformated item
*/
$scope.onTransformItemDone = function (tasksDetails) {
console.log('onTransformItemDone', tasksDetails);
$scope.loaders.tasks = false;
};
/*
* if you want use the promise create by the directive
*/
$scope.getPromise= function (promise) {
console.log('getPromise', promise);
promise.then(
function () {
console.log('success', arguments);
},
function () {
console.log('error', arguments);
},
function () {
console.log('notify',arguments);
}
);
};
}
]);
html view
<table class="table pretty">
<thead>
<tr>
<th class="center">
<span data-i18n-static="domain_tab_TASKS_function"></span>
</th>
<th class="center">
<span data-i18n-static="domain_tab_TASKS_todoDate"></span>
</th>
<th class="center">
<span data-i18n-static="domain_tab_TASKS_state"></span>
</th>
</tr>
</thead>
<tbody>
<!--loader-->
<tr data-ng-show="loaders.tasks">
<td colspan="3" class="center">
<div class="loader"></div>
</td>
</tr>
<!-- no tasks -->
<tr data-ng-show="!tasks.length && !loaders.tasks">
<td colspan="3" class="center">
<span data-i18n-static="domain_tab_TASKS_no_tasks"></span>
</td>
</tr>
<!--tasks-->
<tr data-ng-repeat="task in tasksDetails">
<td>
{{task.function}}
</td>
<td>
{{task.todoDate | date:'longDate'}}
</td>
<td>
<i data-ng-class="{
'state-pending' : 'DOING',
'state-error' : 'ERROR',
'state-done' : 'DONE',
'state-cancel' : 'CANCELLED',
'state-pending' : 'TODO',
'state-pending' : 'INIT'
}"></i>
</td>
</tr>
</tbody>
</table>
<div class="table table-pretty"
data-ovh-angular-pagination-front
data-items="tasksId"
data-paginated-items="tasksDetails"
data-current-page="currentPage"
data-nb-pages="nbPages"
data-items-per-page="itemsPerPage"
data-transform-item="transformItem(item)"
data-on-transform-item-get-promise="getPromise(promise)"
data-on-transform-item-notify="onTransformItemNotify(item)"
data-on-transform-item-done="onTransformItemDone(items)"
data-page-placeholder="{{tr('pagination_page', [currentPage, nbPages])}}"
data-item-per-page-placeholder="{{tr('pagination_display')}}"></div>
Style
.pagination-container {
ul {
&.pagination {
.box-shadow(none);
li {
a {
.color-fn(@defaultPaginationFont);
font-size: @fontSizeMini;
}
&:hover a {
.background-color-fn(@defaultPaginationHoverBackground);
.color-fn(@defaultPaginationHoverFont);
}
&.active a {
.background-color-fn(@defaultPaginationActiveBackground);
.color-fn(@defaultPaginationActiveFont);
font-size: @fontSizeDefault;
}
}
}
}
.pagination-page-goto {
.background-color-fn(@defaultPaginationGoToBackground);
.color-fn(@defaultPaginationGoToFont);
&:hover {
.background-color-fn(@defaultPaginationGoToHoverBackground);
.color-fn(@defaultPaginationGoToHoverFont);
}
}
.pagination-page-input {
.rounded(0px);
.border-color-fn(@defaultPaginationGoToPageBorder);
.background-color-fn(@defaultPaginationGoToPageBackground);
.color-fn(@defaultPaginationGoToPageFont);
}
.pagination-page-size {
font-size: @fontSizeMini;
.rounded(0px);
}
}
Related links
- Contribute: https://github.com/ovh-ux/ovh-angular-pagination-front/CONTRIBUTING.md
- Report bugs: https://github.com/ovh-ux/ovh-angular-pagination-front/issues
- Get latest version: https://github.com/ovh-ux/ovh-angular-pagination-front
License
See https://github.com/ovh-ux/ovh-angular-pagination-front/blob/master/LICENSE