एनजी-दोहराना सॉर्टिंग तीर जावास्क्रिप्ट डेटाटेबल्स

Question

में काम नहीं कर रहा है मैं अंगुलरजे और डेटाटेबल्स के लिए बहुत नया हूं। मुझे एनजी-दोहराने का उपयोग कर तालिका पंक्तियों में डेटा को पॉप्युलेट करने की आवश्यकता है। Iam पंक्तियों को पॉप्युलेट करने और पहली बार सॉर्टिंग को सक्षम करने में सक्षम है। जब मैं पंक्ति डेटा को घुमाने या घुमाने के क्रम में तीरों पर क्लिक करता हूं।

यहाँ मेरी तालिका डेटा

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

यहाँ मेरी जावास्क्रिप्ट कोड

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

छँटाई है मैं हो रही है टीआर के लिए rowcount 1

मैं js फ़ाइल में शामिल किया है है पृष्ठ के नीचे

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

जब मैं डेटा को एनजी-दोहराने के साथ अपनी अच्छी लोडिंग लोड कर रहा हूं। लेकिन जब मैं आरोही या अवरोही क्रमबद्ध करने के लिए शीर्षलेख पर क्लिक करता हूं, तो पंक्तियां मिटा दी जाती हैं।

कृपया मुझे सलाह दें कि मैं गलत कहां कर रहा हूं? मैं आरोही डेटा को क्रमबद्ध करने में असमर्थ हूं, अवरोही और पेजिनेशन सभी काम नहीं कर रहा है।

मेरी अंग्रेजी के लिए खेद है।

Answer 1

कोई अपराध नहीं, लेकिन यह jQuery और कोणीय सोच का एक विशिष्ट मिश्रण है, या यह समझने की कमी है कि कोणीय कैसे काम करता है। यहां कुछ jQuery तर्क को angular digest loop में लपेटने का प्रयास करें। “Thinking in AngularJS” if I have a jQuery background?

आप कभी भी $(document).ready(function() { और कोणीय को गठबंधन नहीं कर सकते हैं। वास्तव में, आप यह सुनिश्चित कर सकते हैं कि आपके ready() को एंगुलर ने ng-repeat व्यवसाय समाप्त करने से पहले निष्पादित किया है। और यही कारण है कि आप हमेशा पंक्ति गणना (शीर्षलेख) के लिए 1 प्राप्त करते हैं और जब आप हेडर पर क्लिक करते हैं तो पंक्तियां क्यों गायब हो जाती हैं। उस समय जब आप पंक्ति गणना प्राप्त करते हैं तो वहां कोई भी पंक्ति नहीं डाली जाती है, और उस समय जब आप dataTable() को तुरंत चालू करते हैं, तो कोई भी पंक्तियां डाली नहीं जाती हैं।

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

या एक directive कि DataTable को दर्शाता है एक बार डेटा, के रूप में में प्रदर्शन ng-repeat की आबादी है बनाने 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({ 
     ... 
     }); 
} 

आशा इस तुम बाहर में मदद मिलेगी।

Answer 2

नीचे दिया गया उदाहरण AngularJs और डेटाटेबल का उपयोग करता है। फ़िल्टरिंग, पेजिनेशन और सॉर्टिंग अच्छा काम कर रहे हैं।

angular-datatable डाउनलोड करें और angular-datatables.min डाल दें।जेएस फ़ाइल में आपकी परियोजना में फ़ाइल <script src="angular-datatables/dist/angular-datatables.min.js"></script>

आशा है कि यह आपकी मदद कर सके।

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