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

问题描述

我很新的AngularJs和数据表。
我有一个要求采用NG-重复来填充表行中的数据。
亚姆能够填充的行，使首次排序。
当我点击箭头排序上升或下降的行数据擦去。

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排序code

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

我得到的行数为1

I'm getting rowcount for tr is 1

我已经包含在页面

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

在进出口数据加载其优良的加载与NG-重复。但是，当我在标题点击排序升序或降序，行擦掉。

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.

对不起，我的英语水平。

Sorry for my English.

推荐答案

没有进攻，但是这是jQuery的典型的混淆和角度思考，或缺乏了解如何角的作品。在这里，试图换一些jQuery逻辑进入 角消化循环 。阅读有很大问题的答案 ，在AngularJS思考如果我有一个jQuery的背景是什么？

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?

您永远不能将 $（文件）。就绪（函数（）{和角度。其实，你可以很确定你的就绪（）前角已经完成它的 NG-重复业务。而这就是被长期执行，为什么你总能得到1的行数（头），为什么当你点击标题的行dissappearing。那时的你得到的行数有没有插入任何行，并且在当时实例化的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.

您可以使用 $超时来强制code延迟，或迫使其进入下一个循环消化：

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)
}

或创建的指令 实例化数据表一旦数据由 NG-重复填充，如在 纳克多个答案证明-repeat终点事件 ：

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

希望这将帮助你。

Hope this will help you out.

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