ng-repeat sorting arrow not working in javascript datatables
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?
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.
You can use $timeout to force delay of the code, or force it into the next 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)}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 :
.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.
The example below uses AngularJs and Datatable. The filtering, pagination and sorting are working good.
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>
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>