<!DOCTYPE html>
  <html>
  
  <head>
  
      <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
  
  </head>
  
  <body ng-app="datatablesSampleApp">
      <div ng-controller="simpleCtrl" class="code">
          <table datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
      </div>
  
      <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
      <script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
      <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/master/dist/angular-datatables.min.js"></script>
      <script src="script.js"></script>
  
  </body>
  
  </html>
(function(angular) {
  'use strict';
  angular.module('datatablesSampleApp', ['datatables']).
  controller('simpleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('ajax', {
        url: 'data.json',
        type: 'GET'
      })
      .withDataProp('data')
      .withOption('serverSide', true)
      .withOption('processing', true)
      .withOption('order', [[0, 'asc'], [1, 'asc']])
      .withPaginationType('full_numbers');
    $scope.dtColumns = [
      DTColumnBuilder.newColumn('id').withTitle('ID'),
      DTColumnBuilder.newColumn('firstName').withTitle('First name'),
      DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
    ];
  });
})(angular);
{
  "draw": 1,
  "recordsTotal": 3,
  "recordsFiltered": 3,
  "data": [{
    "id": 860,
    "firstName": "Superman",
    "lastName": "Yoda"
  }, {
    "id": 870,
    "firstName": "Foo",
    "lastName": "Whateveryournameis"
  }, {
    "id": 590,
    "firstName": "Toto",
    "lastName": "Titi"
  }]
}