I am implementing server-side sorting and pagination, and I need to pass the current page that the user is on so that if they sort and are on a page different than the first page (ex. sort by "least votes" on page 5 does not show the resorted results from page 1 on page 5 but shows the resorted results that should be on page 5). Basically, I need in place sorting but can't figure out how to get the current page.
Server side paging is working without issue, and I believe I am missing something simple here.
HTML (please note that I am using this custom directive: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination )
<tr dir-paginate="article in articles | itemsPerPage:articlesPerPage" total-items="totalArticles" current-page="currentPage">
<td>
<div class="col-md-1 voting well">
<div class="votingButton" ng-click="upVote(articlevote);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" ng-click="downVote(articlevote);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>
</td>
<td>{{article.articletitle}}</td>
<td>{{article.articlecategoryid}}</td>
<td><a ng-href="#article/{{article.id}}/{{article.articlelink}}">{{article.articletitle}}</a></td>
</tr>
</table>
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
Controller
$scope.articles = [];
$scope.totalArticles = 0;
$scope.articlesPerPage = 10; // this should match however many results your API puts on one page
$scope.currentPage = 1;
// sort options
$scope.sortoptions = [
{
label: 'Most Votes',
value: 'articlevotes desc',
},
{
label: 'Least Votes',
value: 'articlevotes asc',
}
];
var sortBy = $scope.sortoptions[0].value;
var currPage = $scope.currentPage; // Get current page
console.log(currPage);
// Initial page load
getResultsPage(1, sortBy);
$scope.update = function (articleSortOrder) {
// get value of sort and log it
console.log(articleSortOrder.value);
sortBy = articleSortOrder.value;
// log current page and pass as parameter
console.log(currPage);
getResultsPage(currPage, sortBy); // need to make dynamic so it gets current page
}
$scope.pageChanged = function (newPage) {
getResultsPage(newPage, sortBy);
};
function getResultsPage(pageNumber, sortorder) {
// currently skipping by page number * articles per page
pfcArticles.query({ $skip: (pageNumber - 1) * $scope.articlesPerPage, $top: $scope.articlesPerPage, $orderby: sortorder, $inlinecount: 'allpages' }, function (data) {
$scope.articles = data.results;
$scope.totalArticles = data.count; // Can change to hard number to reduce total items instead of LimitTo
});
}
The problem is that you are assigning:
var currPage = $scope.currentPage;
So currPage
is set to 1
as your controller is instantiated, and is then never changed. So when you reference currPage
later in the controller, it remains 1
.
You should instead directly reference the $scope.currentPage
value, which will get updated by the pagination directive.
So try changing the "update" method to this:
$scope.update = function (articleSortOrder) {
sortBy = articleSortOrder.value;
getResultsPage($scope.currentPage, sortBy);
}
This should pass the correct current page value to your service.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.