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

一尘不染

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

angularjs

我对AngularJs和数据表很陌生。我需要使用ng-
repeat填充表行中的数据。我能够填充行并首次启用排序。当我单击箭头以升序或降序排序时，行数据消失了。

这是我的表数据

<table datatable="ng" id="example" class="display" cellspacing="0"    width="100%">
                <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进行精细加载。但是，当我单击标题以升序或降序排序时，行被擦除了。

请告诉我我做错了什么？我无法对数据的升序，降序和分页进行排序。

对不起我的英语不好。

阅读 209

2020-07-04

共1个答案

一尘不染

没有冒犯，但这是jQuery和Angular思想的典型混合，或者是缺乏对Angular工作原理的理解。这里尝试将一些jQuery逻辑包装到角度摘要循环中 。

您永远无法$(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)
}

或创建一个由填充数据后实例化dataTable的指令ng-repeat，如ng-repeatfinish事件的多个答案所示：

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

希望这对您有所帮助。

2020-07-04