ng-repeat 排序箭头在 javascript 数据表中不起作用

Posted 2023-02-22

【中文标题】ng-repeat 排序箭头在 javascript 数据表中不起作用

【英文标题】：ng-repeat sorting arrow not working in javascript datatables

【发布时间】：2015-09-05 13:29:50

【问题描述】：

我对 AngularJs 和数据表非常陌生。 我需要使用 ng-repeat 填充表行中的数据。 我能够填充行并首次启用排序。 当我单击箭头进行升序或降序排序时，行数据将被擦除。

这是我的表格数据

<table datatable="ng" id="example" class="display" cellspacing="0"    >
                <thead>
                    <tr>
                        <th class="col1">Campaign Name</th>
                        <th class="col4">Description</th>
                        <th class="col5">Activate/Deactivate</th>
                        <th class="col5">edit</th>
                        <!-- <th class="col5">status</th> -->
                        <!-- <th class="col5">Details</th> -->
                    </tr>
                </thead>
                <tbody >
                    <tr ng-repeat="campaign in campaignListData">
                             <td>campaign.campaignObject.campaignName</td>
                             <td>campaign.campaignObject.campaignMessage</td>
                            <td><button type="button" class="pay-amount pending" style="margin-top:-10px;margin-right:17px;width:128px;height:34px"
                            value = " campaign.campaignObject.label " title="ACTIVATE" ng-click="updateCampaignStatus(campaign.campaignObject.id)">
                                <span style="margin-left:-10px;margin-right:17px;width:128px;height:34px"> campaign.campaignObject.label </span>
                                </button>
                            </td>
                            <td><a href="<c:url value="$contextPath/merchant/manageCampaign/editCampaignConfiguration"/>?campaignId= campaign.campaignObject.id ">
                                <img class="tableImage" style="margin-left:-8px;margin-top:-10px;" src="<c:url value="/resources/images/setting.png" />" ></a>
                            </td>
                    </tr>
                </tbody>
            </table> 

这是我的排序 javascript 代码

<script type="text/javascript">
    $(document).ready(function() 
        $("#noCampaignData").hide();
        //$("#example_paginate").hide();
        var rowCount = $("#example tr").length;
        console.log("Row count value is"+rowCount);
        if (rowCount >= 0) 
            console.log("Entered into Sorting");
            $("#example").dataTable(
                "pagingType" : "full_numbers",
                "order" : [ [ 2, "desc" ] ]
            );
        
    );
</script>

我得到 tr 的行数是 1

我在页面底部包含了 js 文件

<script src="<c:url value="/resources/js/CampaignListController.js" />"></script>
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" />"></script>

当我加载数据时，使用 ng-repeat 可以很好地加载。但是当我单击标题以升序或降序排序时，行会被擦除。

请告诉我我哪里做错了？ 我无法对数据进行升序、降序和分页排序。

对不起我的英语。

【参考方案1】：

无意冒犯，但这是 jQuery 和 Angular 思维的典型混合，或者缺乏对 Angular 工作原理的理解。这里尝试将一些 jQuery 逻辑包装到 angular digest loop 中。阅读问题的精彩答案“Thinking in AngularJS” if I have a jQuery background?

你永远不能将$(document).ready(function() 和 Angular 结合起来。事实上，您可以非常确定您的 ready() 早在 Angular 完成其 ng-repeat 业务之前就已执行。这就是为什么你总是得到 1 的行数（标题）以及为什么当你点击标题时行消失了。在您获得行数时，没有插入任何行，并且在您实例化 dataTable() 时，没有插入任何行。

你可以使用$timeout来强制延迟代码，或者强制进入下一个摘要循环：

$scope.initDataTable = function() 
   $timeout(function() 
      $("#noCampaignData").hide();
      //$("#example_paginate").hide();
      var rowCount = $("#example tr").length;
      console.log("Row count value is"+rowCount);
      if (rowCount >= 0) 
         console.log("Entered into Sorting");
         $("#example").dataTable(
            "pagingType" : "full_numbers",
            "order" : [ [ 2, "desc" ] ]
         );
      
   , 200)

或创建一个directive，一旦数据由ng-repeat 填充，就会实例化dataTable，如ng-repeat finish event 的多个答案所示：

.directive('repeatDone', function() 
    return function(scope, element, attrs) 
        if (scope.$last)  // all are rendered
            scope.$eval(attrs.repeatDone);
        
    
)

...

<tr ng-repeat="campaign in campaignListData" repeat-done="initDataTable">

...

$scope.initDataTable = function() 
      $("#noCampaignData").hide();
      $("#example").dataTable(
         ...
      );

希望对你有所帮助。

【讨论】：

谢谢...您给出了令人敬畏的解释，并且 90% 的功能都在工作...我能够显示标题、箭头并能够按行填充数据并且还能够分页。缺少的一件事是排序...当我单击箭头时，它的冻结和行未按升序或降序排序。有什么建议？ @大卫康拉德

祝你有福了老兄.. 很好的解释。

@davidkonrad 你能详细说明我们如何使用指令来使用搜索和排序功能吗？因为在我的情况下，这些也不起作用

@NullPointer, 是的 - 使用angular datatables directives 真的很容易使用并支持所有功能，这里有一个例子 -> plnkr.co/edit/nBtzURQxSgKIqFvGMkWC?p=preview 实际上我认为如果你真的没有那么多选择想要使用 dataTables 的功能，你可以让 dataTable 像上图那样工作，但是再往前走，你最终会遇到真正的头痛。

@NullPointer - 分叉 plunkr，让我看看你的代码不起作用。

【参考方案2】：

下面的示例使用 AngularJs 和 Datatable。过滤、分页和排序运行良好。

下载 angular-datatable 并将 angular-datatables.min.js 文件放入您的项目中，就像我在 <script src="angular-datatables/dist/angular-datatables.min.js"></script> 行中所做的那样

希望对你有帮助。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="angular-datatables/dist/angular-datatables.min.js"></script>   
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
    </head>
    <body>
        <div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
            <table datatable="ng" class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="name in names" ng-click="testingClick(name)">
                        <td>name.Name</td>
                        <td>name.City</td>
                        <td>name.Country</td>
                      </tr>
                </tbody>
            </table>

            <script>
                var app = angular.module('AngularWayApp', ['datatables']);

                app.controller('AngularWayCtrl', function($scope, $http)
                
                    $http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response)
                    
                        $scope.names = response.records;
                    );

                    $scope.testingClick = function(name)
                    
                        console.log(name);
                    ;
                );
            </script>
        </div>
    </body>
</html>

【讨论】：

非常感谢，我只需要这个 ==> datatable="ng"

不错的一个。它对我帮助很大。