ng-Wiederholung Sortierung Pfeil funktioniert nicht in Javascript-Datatabellen

Question

Ich bin sehr neu in AngularJs und Datatables. Ich habe die Anforderung, die Daten in Tabellenzeilen mit ng-repeat aufzufüllen. Sie können die Zeilen füllen und die Sortierung zum ersten Mal aktivieren. Wenn ich auf die Pfeile klicke, um die Daten aufzureißen oder aufzureißen, gehe ich nach oben oder unten.

Hier ist meine Tabellendaten

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

Hier ist mein 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> 

Sortierung Ich erhalte rowcount für tr 1

I ist die JS-Datei an die enthalten sind, Unterseite der Seite

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

Wenn Daten geladen werden, laden Sie die Datei mit ng-repeat. Aber wenn ich auf die Kopfzeile klicke, um aufsteigend oder absteigend zu sortieren, werden die Zeilen gelöscht.

Bitte beraten Sie mich, wo ich falsch mache? Ich kann die Daten nicht aufsteigend, absteigend sortieren, und die Seitennummerierung funktioniert überhaupt nicht.

Entschuldigung für mein Englisch.

Answer 1

Nichts für ungut, aber das ist eine typische Verwechslung von jQuery und Angular Thinking, oder ein Mangel an Verständnis, wie Angular funktioniert. Hier ein Versuch, einige jQuery-Logik in die angular digest loop zu wickeln. Lesen Sie eine große Antwort auf die Frage “Thinking in AngularJS” if I have a jQuery background?

Sie können nie kombinieren $(document).ready(function() { und Angular. In der Tat können Sie sehr sicher sein, dass Ihr ready() ausgeführt wird, lange bevor Angular sein ng-repeat Geschäft abgeschlossen hat. Und deshalb erhalten Sie immer 1 für die Zeilenanzahl (die Kopfzeile) und warum die Zeilen verschwinden, wenn Sie auf die Kopfzeilen klicken. Zu dem Zeitpunkt, zu dem Sie die Anzahl der Zeilen abrufen, werden keine Zeilen eingefügt. Zum Zeitpunkt der Instanziierung der dataTable() wurden keine Zeilen eingefügt.

kann $timeout verwenden Verzögerung des Codes zu zwingen, oder es zwingen, in den nächsten 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) 
} 

oder ein directive erstellen, die die Datatable instanziiert, sobald die Daten, die von ng-repeat ausgefüllt ist, wie gezeigt in mehrere Antworten für 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 Ihnen helfen wird.

Answer 2

Das folgende Beispiel verwendet AngularJs und Datatable. Das Filtern, Paginieren und Sortieren funktioniert gut.

Laden Sie angular-datatable herunter und setzen Sie angular-datatables.min.js Datei in Ihrem Projekt, wie ich in der Linie <script src="angular-datatables/dist/angular-datatables.min.js"></script>

hoffe, das kann Ihnen helfen.

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