如何在没有列标签的数组中实现排序和分页

Question

我已经使用 AngularJS 创建了一个单页应用程序。

我正在从服务器获取数据（ajax 请求，然后从对象转换为数组数组）。该数据使用 ng-repeat 进行分页和排序显示。

最初我使用了orderby:sortkey:reverse函数，虽然它确实完成了排序，但是数据被提取并以带有键的对象的形式显示。

现在由于分页需要数据以数组形式，分页现在可以工作，但排序不能。我的数组之前如下所示：

现在，它看起来像这样：

我的桌子看起来像：

<div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" >
                <thead>
                <tr>
                    <th>View</th>
                    <th ng-click="sort(data[2])">Primary Title <span class="glyphicon sort-icon" ng-show="sortKey==data[2]" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th ng-click="sort(data[1])">Primary Authors <span class="glyphicon sort-icon" ng-show="sortKey==data[1]" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th ng-click="sort(data[3])">Publication Date <span class="glyphicon sort-icon" ng-show="sortKey==data[3]" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                </tr>
                </thead>

                <tbody>
                <tr ng-repeat="data in searchDataValues.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | orderBy:sortKey:reverse">
                    <td ng-click="openModal(data)">
                        <div class="media-box-body">
                            <!--<div class="pull-right btn btn-info btn-sm" id="show">View</div>-->
                            <button id="{{'object-' + $index }}">Show Dialog</button>
                            <dialog id="modal">
                                <p>Hi, I'm a modal!</p>
                                <button id="{{'object1-' + $index }}">Okay</button>
                            </dialog>
                            <script>
                                var modal = document.getElementById('modal');
                                var showBtn = document.getElementById("{{'object-' + $index }}");
                                var closeBtn = document.getElementById("{{'object1-' + $index }}");

                                // Setup an event listener for the show button.
                                if (showBtn){
                                    showBtn.addEventListener('click', function(e) {
                                        e.preventDefault();

                                        // Show the modal.
                                        modal.showModal();
                                    });
                                }

                                // Setup an event listener for the close button.
                                if (closeBtn){
                                    closeBtn.addEventListener('click', function(e) {
                                        e.preventDefault();

                                        // Close the modal.
                                        modal.close();
                                    });
                                }

                            </script>
                        </div>
                    </td>
                    <td>{{ data[2]}}</td>
                    <td>{{ data[1] }}</td>
                    <td>{{ data[3] }}</td>
                </tr>
                </tbody>
            </table>
        </div>

我的 app.js 看起来像：

$scope.searchDataValues = [[]];

        var r = 1; //start from rows 3
        var c = 0; //start from col 5

        var rows = data.length;
        var cols = 4;
        for( var i=r; i<rows; i++ ) {
            $scope.searchDataValues.push( [] );
        }
        var i = 0;

       for (var k in data){
            if ( i <= rows) {
                $scope.searchDataValues[i].push(
                    data[k].id, data[k].primary_authors, data[k].primary_title, data[k].pub_year);
                i++;
            }
       }
       $scope.totalItems = $scope.searchDataValues.length;

这是我之前的排序函数：

$scope.sort = function(keyname){
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }

如果有人可以指出教程或示例，那就太好了。

Answer 1

您应该将数据作为键值对（在对象中）而不是单例变量推送：

$scope.searchDataValues[i].push( {
    'id' : data[k].id,
    'primary_authors' : data[k].primary_authors, 
    'primary_title' : data[k].primary_title,
    'pub_year' : data[k].pub_year);
    }
)