angularjs - Angular 分页反向跳转

Question

我有这张表:

这是代码和 Fiddle :

HTML

<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, currentPage, currentPage + gap) "
                        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>
    <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
    <pre>currentPage: {{currentPage|json}}</pre>
    <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>

JS

function ctrlRead($scope, $filter) {
    // init
    $scope.sortingOrder = 'name';
    $scope.gap = 5;
    $scope.cached = 0;
    $scope.reverse = false;
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.items = [
        {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
        {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
//....
    ];

    var searchMatch = function (haystack, needle) {
        if (!needle) {
            return true;
        }
        return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
    };

    // init the filtered items
    $scope.search = function () {
        $scope.filteredItems = $filter('filter')($scope.items, function (item) {
            for(var attr in item) {
                if (searchMatch(item[attr], $scope.query))
                    return true;
            }
            return false;
        });
        // take care of the sorting order
        if ($scope.sortingOrder !== '') {
            $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
        }
        $scope.currentPage = 0;
        // now group by pages
        $scope.groupToPages();
    };

    // calculate page in place
    $scope.groupToPages = function () {
        $scope.pagedItems = [];

        for (var i = 0; i < $scope.filteredItems.length; i++) {
            if (i % $scope.itemsPerPage === 0) {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
            } else {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
            }
        }
    };

    $scope.range = function (size,start, end) {

        if( $scope.cached == start){
            start = start - 4;
            console.log('start',start);
        }

        $scope.cached = start;


        var ret = [];        
        console.log(size,start, end);

        if(size < 2){return ret;}

        if (size < end) {
            end = size;
            start = size-$scope.gap;
        }
        for (var i = start; i < end; i++) {
            if(i<0) continue;
            ret.push(i);
        }        
         console.log(ret);        
        return ret;
    };

    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pagedItems.length - 1) {
            $scope.currentPage++;
        }
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    // functions have been describe process the data for display
    $scope.search();

    // change sorting order
    $scope.sort_by = function(newSortingOrder) {
        if ($scope.sortingOrder == newSortingOrder)
            $scope.reverse = !$scope.reverse;

        $scope.sortingOrder = newSortingOrder;       
    };
};
ctrlRead.$inject = ['$scope', '$filter'];

从代码中您可以看到我们有 13 组，每组 5 行。

如果我按分页键 5，5 按钮会跳到第一个位置，最后一个位置是 9。

通过这种方式，我可以快速“遍历”所有数据。

我的问题是我不知道如何让它反向跳回来。

例如，如果我留在 13:

然后我按9，我希望9将跳转到分页末尾，列表中的第一个元素将是5。

如何实现这一目标？

谢谢，

Answer 1

一般来说，您需要将当前页面索引和页面导航链接索引的概念分离。不过，有很多方法可以做到这一点。我通过在您创建的范围中添加左右间隙来做到这一点，这可以更好地控制快速导航按钮的索引。因此，当您调用 setPage 时，我只需添加一点检查:

if (this.n <= $scope.currentPage) {
    $scope.left_gap = $scope.gap-1;
    $scope.right_gap = 1;
} else {            
    $scope.left_gap = 0;
    $scope.right_gap = $scope.gap;
}

这样，当您单击当前页面的左侧时，它将执行正确的间隙，以便单击的索引位于右侧，但右键单击行为仍然有效。您只需使用:

<li ng-repeat="n in range(pagedItems.length, currentPage - left_gap, currentPage + right_gap) ">

但这并不是没有错误，您仍然需要修复以确保始终保持 5 个左右，但我会将其留给您。这是fiddle一起玩。

希望这有帮助!