[英]AngularJS Pagination - Get Current Page and Pass to Controller
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). 我正在实现服务器端排序和分页,我需要传递用户所在的当前页面,以便它们排序并且位于与第一页不同的页面上(例如,按照第5页的“最少投票”排序)不会显示第5页第1页中的求助结果,但会显示第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 ) HTML(请注意我使用的是这个自定义指令: 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. 因此,当您的控制器被实例化时,
currPage
设置为1
,然后永远不会更改。 So when you reference currPage
later in the controller, it remains 1
. 所以当你稍后在控制器中引用
currPage
时,它仍然是1
。
You should instead directly reference the $scope.currentPage
value, which will get updated by the pagination directive. 您应该直接引用
$scope.currentPage
值,该值将由pagination指令更新。
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. 这应该将正确的当前页面值传递给您的服务。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.