我的自定义指令：
app.directive("gridPaging", function () {
return {
template:
'<div class="row griddetails">' +
'<div class="col-md-6 col-xl-6 text-left" ng-model="Length">Showing <span ng-model="fromPage">{{fromPage}}</span> <span class="d-none" ng-bind="filter.PageSize"></span> to <span ng-model="toPage">{{toPage}}</span> of {{Length}} entries</div>' +
'<div class="col-md-6 col-xl-6"><ul class="pagination float-right">' +
'<li class="page-item" ng-click="Position=-1;ValueChange();indexChange();" ng-value="First"><a class="page-link" ><i class="fa-fast-backward fa"></i></a></li>' +
'<li class="page-item" ng-click="Position=-2;ValueChange();indexChange();" ng-value="First"><a class="page-link"><i class="fa-step-backward fa"></i></a></li>' +
'<li class="page-item" ng-model="index" ng-init="index=$index+1" ng-repeat="p in page" ng-click="ValueChange(index);indexChange();" ng-value="First"><a class="page-link">{{index}}</a></li>' +
'<li class="page-item" ng-click="jumpIncrement();" ng-value="First"><a class="page-link">...</a></li>' +
'<li class="page-item" ng-click="Position=-3;ValueChange();indexChange();" ng-value="First"><a class="page-link"><i class="fa-step-forward fa"></i></a></li>' +
'<li class="page-item" ng-click="Position=-4;ValueChange();indexChange();" ng-value="First"><a class="page-link"><i class="fa-fast-forward fa"></i></a></li>' +
'</ul></div></div>'
,
controller: function ($scope) {
$scope.page = [1, 2, 3, 4, 5];
},
link: function (scope, element) {
scope.filter.CurrentPage = 0;
var lastPage = parseInt(scope.Length / parseInt(scope.filter.PageSize));
scope.fromPage = 1;
scope.toPage = scope.fromPage + scope.filter.PageSize - 1;
scope.ValueChange = function (index) {
if (scope.Position == -1) {
if (scope.filter.Direction == 'Asc') {
scope.filter.CurrentPage = 0;
}
else if (scope.filter.Direction == 'Desc') {
scope.filter.CurrentPage = 0;
}
else {
scope.filter.CurrentPage = 0;
}
scope.fromPage = 1;
scope.fromPage = 0;
scope.toPage = parseInt(scope.filter.PageSize);
}
else if ((scope.Position == -2 && scope.filter.CurrentPage > 0)) {
scope.filter.CurrentPage = parseInt(scope.filter.CurrentPage) - 1;
scope.fromPage = parseInt(scope.fromPage) - parseInt(scope.filter.PageSize);
scope.toPage = parseInt(scope.toPage) - parseInt(scope.filter.PageSize);
}
else if (scope.Position == -3 ) {
if (scope.filter.CurrentPage < parseInt(scope.Length / parseInt(scope.filter.PageSize)))
{
scope.filter.CurrentPage = parseInt(scope.filter.CurrentPage) + 1;
scope.fromPage = parseInt(scope.fromPage) + parseInt(scope.filter.PageSize);
scope.toPage = parseInt(scope.fromPage) + parseInt(scope.filter.PageSize) - 1;
}
}
else if (scope.Position == -4 ) {
if (scope.filter.Direction == 'Asc') {
scope.filter.CurrentPage = parseInt(scope.Length / parseInt(scope.filter.PageSize));
if (scope.filter.CurrentPage == scope.Length) {
scope.filter.CurrentPage = scope.filter.CurrentPage - 1;
}
}
else if (scope.filter.Direction == 'Desc') {
scope.filter.CurrentPage = parseInt(scope.Length / parseInt(scope.filter.PageSize));
}
else {
scope.filter.CurrentPage = parseInt(scope.Length / parseInt(scope.filter.PageSize));
if (scope.filter.CurrentPage == scope.Length) {
scope.filter.CurrentPage = scope.filter.CurrentPage - 1;
}
}
scope.fromPage = parseInt(scope.Length) - parseInt(scope.filter.PageSize);
scope.toPage = parseInt(scope.Length);
}
else {
scope.filter.CurrentPage = parseInt(index) - 1;
scope.fromPage = parseInt(scope.filter.CurrentPage) * parseInt(scope.filter.PageSize) + 1;
scope.toPage = parseInt(scope.fromPage) + parseInt(scope.filter.PageSize) - 1;
}
};
}
};
});
标签：
<grid-paging></grid-paging>