I solved the problem using the code below. Filtering, pagination and sorting work well.
Download angular-datatable and put the angular -datatables.min.js file in your project, as I did in the line <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>
source share