Как достичь разбивки на страницы/таблицу с помощью Angular.js?

Ответ 1

Я бы использовал таблицу и реализовал разбиение на страницы в контроллере, чтобы контролировать, сколько показано, и кнопки для перехода на следующую страницу. Эта скрипта может вам помочь.

 <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                        <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
                        <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
                        <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
                        <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
                        <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
                        <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
                    </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                                <li ng-repeat="n in range(pagedItems.length)"
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>
                <tbody>
                    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.field3}}</td>
                        <td>{{item.field4}}</td>
                        <td>{{item.field5}}</td>
                    </tr>
                </tbody>
            </table> 

значение переменной $scope.range в примере скрипта должно быть:

$scope.range = function (size,start, end) {
    var ret = [];        
    console.log(size,start, end);

       if (size < end) {
        end = size;
        if(size<$scope.gap){
             start = 0;
        }else{
             start = size-$scope.gap;
        }

    }
    for (var i = start; i < end; i++) {
        ret.push(i);
    }        
     console.log(ret);        
    return ret;
};

Ответ 2

Это самый простой пример, который я нашел для разбивки на страницы! http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

Ответ 3

Я использую это решение:

Это немного более кратким, поскольку я использую: ng-repeat="obj in objects | filter : paginate" для фильтрации строк. Также он работал с $resource:

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

Ответ 4

Вот мое решение. Решение @Maxim Shoustin имеет некоторые проблемы с сортировкой. Я также завершаю все это директивой. Единственная зависимость - UI.Bootstrap.pagination, которая отлично справилась с разбиением на страницы.

Вот plunker

Вот исходный код github.

Ответ 5

здесь я решил проблему с разбивкой по угламJS с некоторой дополнительной настройкой на стороне сервера + просмотр конца вы можете проверить код, который будет более эффективным. все, что мне нужно сделать, это положить два значения начального номера и конечного числа, он будет представлять индекс возвращаемого массива json.

здесь находится 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();
    });
};

если вы внимательно посмотрите $scope.CountStart и $ scope.CountStart - два аргумента, которые я передаю с помощью api

вот код для следующей кнопки

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

вот код предыдущей кнопки

$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();

    }
};

если номер страницы равен нулю, моя предыдущая кнопка будет деактивирована

   $scope.nextPageDisabled = function () {

    console.log($scope.currentPage);

    if ($scope.currentPage === 0) {
        return false;
    } else {
        return true;
    }
};

Ответ 6

Таблица с papging, сортировкой и фильтром

См. полный пример в Фильтр сортировки таблицы Angularjs

Ответ 7

Лучшее простое решение для плагинов и игр для разбивки на страницы.

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

вам нужно будет заменить ng-repeat на пользовательскую директиву.

<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>

Внутри страницы вам просто нужно добавить

<div align="center">
       <dir-pagination-controls
            max-size="100"
            direction-links="true"
            boundary-links="true" >
       </dir-pagination-controls>
</div>

В вашей загрузке index.html

<script src="./js/dirPagination.js"></script>

В вашем модуле просто добавьте зависимости

angular.module('userApp',['angularUtils.directives.dirPagination']);

и все это необходимо для разбивки на страницы.

Может быть полезно для кого-то.