Как реализовать угловую JS Pagination

0

Я сталкиваюсь с проблемой с разбивкой на страницы. Я попробовал несколько ответов, включая настраиваемые фильтры, и каждый раз, когда данные не отображаются. Я знаю, что данные были извлечены и представлены в DOM, но я не могу понять, почему он не отображает данные.

Элементы управления разбиением на страницы:

// pagination controls
    $scope.currentPage = 1;
    $scope.totalItems = $scope.searchDataValues.length;
    $scope.entryLimit = 8; // items per page
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
    $scope.pageChanged    = pageChanged;
    $scope.paginatedList = $scope.searchDataValues.slice(0, $scope.entryLimit);

    function pageChanged(){

        var begin = (($scope.currentPage - 1) * $scope.entryLimit),
            end   = begin + $scope.entryLimit;

        $scope.paginatedList = $scope.searchDataValues.slice(begin, end);

    }

HTML-код:

<pagination
           ng-change="pageChanged()"
           total-items="totalItems"
           items-per-page="entryLimit"
           ng-model="currentPage"
           max-size="noOfPages"
           class="pagination-sm"
           boundary-links="true">
</pagination>

Фильтр Ng-repeat:

<tr ng-repeat="data in searchDataValues | orderBy:sortKey:reverse | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">

Начать с фильтра:

app.filter('startFrom', function () {
return function (input, start) {
    if (input === undefined || input === null || input.length === 0) return [];
    start = +start; //parse to int
    console.log(input.slice(start))
    return input.slice(start);
}
});
Теги:
pagination
angularjs-ng-repeat

3 ответа

0
Лучший ответ

Для тех, кто приходит сюда и читает сообщение.

В итоге я использовал код, представленный здесь: http://embed.plnkr.co/eheFSh/

Я действительно работал, но он нарушил мою функцию сортировки. Я попытаюсь заставить их обоих работать вместе.

0

Догадка: функция pageChanged изменяет $ scope.paginatedList, но ваш ng-repeat привязан к searchDataValues, а не к paginatedList.

Это может быть источником ваших неприятностей, но это просто предположение, потому что вы не предоставили весь свой код.

  • 0
    Спасибо за предложение, я использовал: embed.plnkr.co/eheFSh . Но это испортило мою функцию сортировки. Теперь я должен выяснить, как заставить их обоих играть друг с другом.
0

Вы можете использовать директиву pagination ust bootstrap. Я использую старую версию, так что синтаксис может немного отличаться. Это пример

  • 0
    Спасибо за предложение. В итоге я использовал embed.plnkr.co/eheFSh

Ещё вопросы

Сообщество Overcoder
Наверх
Меню