ng重复排序箭头在javascript数据表中不起作用 [英] ng-repeat sorting arrow not working in javascript datatables

问题描述

我对AngularJs和datatables非常新鲜。
我需要使用ng-repeat填充表格中的数据。
Iam能够首次填充行并启用排序。
当我点击箭头排序升序或下降行数据擦除。

I'm very new to AngularJs and datatables. I have a requirement to populate the data in table rows using ng-repeat. Iam able to populate the rows and enabling the sorting for the first time. When i click on the arrows to sort ascend or descend the row data wiping off.

这是我的表数据

<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代码

Here is my sorting javascript code

<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的rowcount为1

I'm getting rowcount for tr is 1

我的页面底部包含js文件

I have the js file included at the bottom of the page

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

当我使用ng-repeat加载数据时，它的正常加载。但是当我点击标题排列升序或降序时，行被擦除。

When Im loading data its fine loading with ng-repeat. But when i click on header to sort ascending or descending, rows are wiped off.

请告诉我我做错了什么？
我无法排序数据升序，降序和分页不起作用。

Please advise me where i'm doing wrong? I'm unable to sort the data ascending, descending and pagination is not at all working.

对不起我的英语。

推荐答案

没有任何进攻，但这是jQuery和Angular思维的典型混合，或者对Angular的工作缺乏了解。这里尝试将一些jQuery逻辑包装到 angular摘要循环 。如果我有一个jQuery背景，请阅读 在AngularJS中思考的问题的一个很好的答案。

No offense, but this is a typical mix-up of jQuery and Angular thinking, or a lack of understanding how Angular works. Here an attempt to wrap some jQuery logic into the angular digest loop. Read a great answer to the question "Thinking in AngularJS" if I have a jQuery background?

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

You cannot ever combine $(document).ready(function() { and Angular. In fact, you can be very sure that your ready() is executed long before Angular has finished its ng-repeat business. And thats why you always get 1 for the row count (the header) and why the rows are dissappearing when you click on the headers. At the time you get row count there is not inserted any rows, and at the time you instantiate the dataTable(), no rows have been inserted.

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

You can use $timeout to force delay of the code, or force it into the next digest loop :

$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-repeat finish event ：

or create a directive that instantiates the dataTable once the data is populated by ng-repeat, as demonstrated in multiple answers for 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({
         ...
      });
}

希望这将有助于您。

这篇关于ng重复排序箭头在javascript数据表中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！