How to do pagination for angular table?

Question

I am trying to do pagination for scope object in angularjs,for that am using jquery data table plugin.
But am getting Cannot read property 'insertBefore' of null error,Table datas are also not displaying.
What is the meaning for this error?
Is anything wrong in my code?

 var app= angular.module('myApp',[]) app.controller('myController',function($scope){ $scope.details=[ { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' }, { 'name':'aaa', 'age':'20' } ] $scope.init = function(){ $('#myData').dataTable(); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div ng-app="myApp" ng-controller="myController" ng-init="init()"> <table id="myData"> <thead> <td>S.no</td> <td>Name</td> <td>Age</td> </thead> <tbody> <tr ng-repeat="data in details"> <td>{{$index+1}}</td> <td>{{data.name}}</td> <td>{{data.age}}</td> </tr> </tbody> </table> </div> 

Can anybody let me know what am wrong?Please correct me if am wrong.Thanks!!:-)

Answer 1

for perform jquery object in controller you can create an directive in this way

but for pagination in table you can download angular-table and add angular-table module to your app.and then use angular table in bellow way

angular table in your view :

    <table id="myData" at-config="config" at-table at-list="details">

      <tbody>
        <tr >
          <td at-implicit at-title='S.no'>{{$index+1}}</td>
          <td at-implicit at-attribute="name" at-title='Name'></td>
          <td at-implicit at-attribute="age" at-title='Age'></td>
        </tr>
      </tbody>
    </table>
<at-pagination at-config="config" at-list="details"></at-pagination>

add config in your controller:

 $scope.config = {
        itemsPerPage: 10,
        maxPages: 5,
        currentPage: 0,
        orderBy: 0,
        fillLastPage: false
    };

you can also use pagination directive for your purpose