Let's say I receive an object literal with 15+ objects and I need to display them in a nice layout (not all in a row), what is the most efficient method for controlling when the line should break/page should end?
Right now I'm using ng-repeat on table row's, and the result is a long thin table with one column.
Edit for clarification. Could have objects within objects/more params. Here is my object:
$scope.zones = [
{"name": "Zone 1",
"activity": "1"},
{"name": "Zone 2",
"activity": "1"},
{"name": "Zone 3",
"activity": "0"},
{"name": "Zone 4",
"activity": "0"},
{"name": "Zone 5",
"activity": "0"},
{"name": "Zone 6",
"activity": "0"},
{"name": "Zone 7",
"activity": "1"},
{"name": "Zone 8",
"activity": "0"},
{"name": "Zone 9",
"activity": "0"},
{"name": "Zone 10",
"activity": "0"},
{"name": "Zone 11",
"activity": "1"},
{"name": "Zone 12",
"activity": "1"},
{"name": "Zone 13",
"activity": "0"},
{"name": "Zone 14",
"activity": "0"},
{"name": "Zone 15",
"activity": "1"},
];
This question is related to
angularjs
angular-ui
angularjs-ng-repeat
I use this solution:
It's a bit more concise since I use: ng-repeat="obj in objects | filter : paginate"
to filter the rows. Also made it working with $resource:
here i have solve my angularJS pagination issue with some more tweak in server side + view end you can check the code it will be more efficient. all i have to do is put two value start number and end number , it will represent index of the returned json array.
here is the angular
var refresh = function () {
$('.loading').show();
$http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) {
$scope.devices = response;
$('.loading').hide();
});
};
if you see carefully $scope.CountStart and $scope.CountStart are two argument i am passing with the api
here is the code for next button
$scope.nextPage = function () {
$('.loading').css("display", "block");
$scope.nextPageDisabled();
if ($scope.currentPage >= 0) {
$scope.currentPage++;
$scope.CountStart = $scope.CountStart + $scope.DevicePerPage;
$scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage;
refresh();
}
};
here is the code for previous button
$scope.prevPage = function () {
$('.loading').css("display", "block");
$scope.nextPageDisabled();
if ($scope.currentPage > 0) {
$scope.currentPage--;
$scope.CountStart = $scope.CountStart - $scope.DevicePerPage;
$scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage;
refresh();
}
};
if the page number is zero my previous button will be deactivated
$scope.nextPageDisabled = function () {
console.log($scope.currentPage);
if ($scope.currentPage === 0) {
return false;
} else {
return true;
}
};
The best simple plug and play solution for pagination.
https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002
you would jus need to replace ng-repeat with custom directive.
<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>
Within the page u just need to add
<div align="center">
<dir-pagination-controls
max-size="100"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
In your index.html load
<script src="./js/dirPagination.js"></script>
In your module just add dependencies
angular.module('userApp',['angularUtils.directives.dirPagination']);
and thats all needed for pagination.
Might be helpful for someone.
Here is my solution. @Maxim Shoustin's solution has some issue with sorting. I also wrap the whole thing to a directive. The only dependency is UI.Bootstrap.pagination, which did a great job on pagination.
Here is the plunker
Here is the github source code.
The simplest way is using slice. You pipe the slice and mention the start index and end index for the part of the data you wish to display. Here is the code:
HTML
<table>
<thead>
...
</thead>
<tbody>
<tr *ngFor="let row of rowData | slice:startIndex:endIndex">
...
</tr>
</tbody>
</table>
<nav *ngIf="rowData" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" (click)="updateIndex(0)" aria-label="Previous">
<span aria-hidden="true">First</span>
</a>
</li>
<li *ngFor="let i of getArrayFromNumber(rowData.length)" class="page-item">
<a class="page-link" (click)="updateIndex(i)">{{i+1}}</a></li>
<li class="page-item">
<a class="page-link" (click)="updateIndex(pageNumberArray.length-1)" aria-label="Next">
<span aria-hidden="true">Last</span>
</a>
</li>
</ul>
</nav>
TypeScript
...
public rowData = data // data you want to display in table
public paginationRowCount = 100 //number of records in a page
...
getArrayFromNumber(length) {
if (length % this.paginationRowCount === 0) {
this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount)).keys());
} else {
this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount) + 1).keys());
}
return this.pageNumberArray;
}
updateIndex(pageIndex) {
this.startIndex = pageIndex * this.paginationRowCount;
if (this.rowData.length > this.startIndex + this.paginationRowCount) {
this.endIndex = this.startIndex + this.paginationRowCount;
} else {
this.endIndex = this.rowData.length;
}
}
Refence for tutorial: https://www.youtube.com/watch?v=Q0jPfb9iyE0
This is the simplest example I found for pagination! http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/
Source: Stackoverflow.com