Question

有人可以告诉我该怎么做吗？我有20行的表。我想最初显示10条记录。如果用户按向右箭头则需要显示10条记录。如果用户按上一条箭头，则需要显示上一条记录

谢谢

Answer 1

这是用于分页数组数据的页面导航的箭头键（向左和向右）的工作演示。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
</head>
<body>
    <div data-paginated>
        <h1>Display results for page: {{ page+1 }}</h1>
        <table>
            <tr ng-repeat="number in getPaginated(numbers,page)">
                <td>{{ number }}</td>
            </tr>
        </table>
        <p>Use keyboard LEFT ARROW or RIGHT ARROW to move between pages.</p>
    </div>
    <script type="text/javascript">
        angular.module('app',[])
            .directive('paginated',['$window',function($window){
                return {
                    controller: function($scope){
                        $scope.page = 0;
                        $scope.pageSize = 10;
                        $scope.numbers = [
                            'set_a_0','set_a_1','set_a_2','set_a_3','set_a_4','set_a_5','set_a_6','set_a_7','set_a_8','set_a_9',
                            'set_b_0','set_b_1','set_b_2','set_b_3','set_b_4','set_b_5','set_b_6','set_b_7','set_b_8','set_b_9',
                            'set_c_0','set_c_1','set_c_2','set_c_3','set_c_4','set_c_5','set_c_6','set_c_7','set_c_8','set_c_9',
                            'set_d_0','set_d_1','set_d_2','set_d_3','set_d_4','set_d_5','set_d_6','set_d_7','set_d_8','set_d_9'
                        ];
                        $scope.getPaginated = function(arrayObject,startIndex){
                            if(startIndex > arrayObject.length-1){
                                return false;
                            }
                            var returnArray = [];
                            var start_i = ($scope.pageSize*startIndex);
                            for (var i = start_i; i < $scope.pageSize+start_i; i++) {
                                if(i > arrayObject.length-1){
                                    break;
                                }
                                returnArray.push(arrayObject[i]);
                            }
                            return returnArray;
                        };
                        $window.document.body.addEventListener('keydown',function(e){
                            switch(e.keyCode){
                                case 37:
                                    $scope.page--;
                                    break;
                                case 39:
                                    $scope.page++;
                                    break;
                            }
                            if($scope.page < 0) $scope.page = 0;
                            else if ( $scope.page > ($scope.numbers.length/$scope.pageSize)-1) $scope.page = ($scope.numbers.length/$scope.pageSize)-1;
                            $scope.$apply();
                        });
                    }
                };
            }]);
    </script>
</body>
</html>

Answer 2

您可以找到有关UI-Bootstrap分页和

的信息。

尝试使用分页示例可以帮助您http://embed.plnkr.co/eheFSh/

如何使用左箭头和右箭头在jQuery中实现分页

2 个答案: