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

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.

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

Here is my table data

这是我的表格数据

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

Here is my sorting javascript code

这是我的排序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>

I'm getting rowcount for tr is 1

我得到的行数为tr是1

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

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

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

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.

当我使用ng-repeat加载数据时的精细加载。但是当我点击标题以升序或降序排序时,行将被删除。

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.

对不起我的英语不好。

2 个解决方案

#1

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?

没有冒犯,但这是jQuery和Angular思维的典型混淆,或者缺乏对Angular如何工作的理解。这里尝试将一些jQuery逻辑包装到角度摘要循环中。如果我有一个jQuery背景,请阅读“Thinking in AngularJS”这个问题的一个很好的答案?

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.

你不能组合$(document).ready(function(){和Angular。事实上,你可以非常肯定你的ready()在Angular完成ng-repeat业务之前就已经执行了。这就是为什么你总是得到1表示行计数(标题)以及当您单击标题时行消失的原因。当您获得行计数时,没有插入任何行,并且在您实例化dataTable()时,没有行插入。

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

您可以使用$ 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)
}

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 :

或者创建一个指令,一旦数据被ng-repeat填充,就会实例化dataTable,如ng-repeat finish事件的多个答案所示:

.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.

希望这会帮助你。

#2

The example below uses AngularJs and Datatable. The filtering, pagination and sorting are working good.

下面的示例使用AngularJs和Datatable。过滤,分页和排序都很好。

Download angular-datatable and put angular-datatables.min.js file in your project as I do in the line <script src="angular-datatables/dist/angular-datatables.min.js"></script>

下载angular-datatable并将angular-datatables.min.js文件放入项目中,就像我在行

Hope this can help you.

希望这可以帮到你。

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

#1