javascript - AngularJS Pagination - Get Current Page and Pass to Controller - Stack Overflow

admin管理员组

文章数量:1421921

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: )

<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
    });
}

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./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
    });
}

• javascript
• angularjs
• pagination

Share Improve this question Follow edited Feb 5, 2015 at 13:52 Kode asked Feb 4, 2015 at 19:19 KodeKode 3,2352020 gold badges8080 silver badges148148 bronze badges 3

• If I console log the $scope.currentPage, it is only returning the number 1. I have tried the code listed in some paging plunks, and the plunker returns the page numbers correctly but mine doesn't. – Kode Commented Feb 5, 2015 at 5:03
• I don't see the dir-paginate and dir-pagination-controls directives in your view code. Could you update the question to show them? – Michael Bromley Commented Feb 5, 2015 at 9:10
• Added, it appears that the currentPage is not being passed. I spun up an example of the default angularUI pagination but appeared to have the same issue. – Kode Commented Feb 5, 2015 at 13:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签： javascriptAngularJS PaginationGet Current Page and Pass to ControllerStack Overflow