ng-powtórzenie strzałki sortowania nie działa w javascript datatables

Question

Jestem bardzo nowy w AngularJs i datatables. Mam wymóg zapełniania danych w wierszach tabeli przy użyciu polecenia ng-repeat. Potrafi zapełnić wiersze i włączyć sortowanie po raz pierwszy. Po kliknięciu na strzałki, aby posortować dane, należy wytrzeć lub zejść z rzędu.

Oto moje dane tabeli

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

Oto mój sortowania kodu 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> 

Dostaję rowcount dla TR 1

Mam plik js zawarte u dolna strona:

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

Gdy ładuję dane, ładowanie jest dokładne z ng-repeat. Ale po kliknięciu nagłówka w celu sortowania rosnącego lub malejącego wiersze są usuwane.

Proszę mi doradzić, gdzie robię źle? Nie mogę posortować danych rosnąco, malejąco i stronicowania w ogóle nie działa.

Przepraszamy za mój angielski.

Answer 1

Bez urazy, ale jest to typowa mieszanka myślenia jQuery i Angular, lub brak zrozumienia działania Angular. Oto próba owinięcia logiki jQuery w angular digest loop. Przeczytaj doskonałą odpowiedź na pytanie: “Thinking in AngularJS” if I have a jQuery background?

Nie można nigdy połączyć $(document).ready(function() { ani Angular. W rzeczywistości możesz być bardzo pewny, że twoja ready() jest wykonywana na długo przed zakończeniem przez Angular firmy ng-repeat. I dlatego zawsze dostajesz 1 dla liczby wierszy (nagłówek) i dlaczego wiersze znikają po kliknięciu nagłówków. W momencie otrzymania liczby wierszy nie są wstawiane żadne wiersze, a w momencie tworzenia instancji dataTable() nie wstawiono żadnych wierszy.

Można użyć $timeout wymusić opóźnienie kodu, lub zmusić go do następnego strawienia pętli:

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

lub utwórz directive który tworzy wystąpienie DataTable, gdy dane są wypełniane przez ng-repeat, jak wykazano w wiele odpowiedzi na 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({ 
     ... 
     }); 
} 

nadzieję, że będzie ci pomóc.

Answer 2

Poniższy przykład wykorzystuje AngularJs i Datatable. Filtrowanie, paginacja i sortowanie działają dobrze.

Pobierz angular-datatable i wstaw angular-datatables.min.js plik w twoim projekcie, tak jak ja w linii <script src="angular-datatables/dist/angular-datatables.min.js"></script>

Mam nadzieję, że to ci pomoże.

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