Ng-repeat sort arrow does not work in javascript datatables

Question

I am very new to AngularJs and datatables. I have a requirement to populate the data in the rows of a table using ng-repeat. Iam can fill in the lines and enable sorting for the first time. When I click on the arrows to sort the popup or to drop the row data.

Here are 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 javascript code for sorting

 <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 get rowcount for tr - 1

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

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

When Im loads data, its subtle loading with ng-repeat. But when I click on the title to sort in ascending or descending order, the lines are erased.

Please tell me where am I doing wrong? I can not sort the data in ascending, descending and pagination, does not work.

Sorry for my English.

Answer 1

Do not be offended, but this is a typical confusion of jQuery and Angular thinking or lack of understanding of how Angular works. Here's an attempt to wrap some jQuery logic in an angular digest loop . Read the excellent answer to the question "Thinking in AngularJS" if I have jQuery background?

You can never combine $(document).ready(function() { and Angular. In fact, you can be sure that your ready() is executed long before Angular completes its ng-repeat business. And so you always you get 1 to count the rows (header) and why the rows disappear when you click on the headers, while you get the row count, no rows are inserted, and no rows were inserted at the time the dataTable() instantiated.

You can use $timeout to force a delay in the code or force it to be included in the following digest cycle:

 $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 creates an instance of dataTable after populating the ng-repeat data, as shown in several responses to the ng-repeat completion 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 helps you.

Answer 2

The example below uses AngularJs and Datatable. Filtering, pagination and sorting work well.

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

Hope this helps 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>