Angular datatables - #156

<!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 src="http://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.5/angular-resource.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', ['ngResource', 'datatables']).controller('simpleCtrl', function($scope, $compile, DTOptionsBuilder, DTColumnBuilder, $resource) {
    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('responsive', true)
      .withOption("bProcessing", true)
      .withOption('bServerSide', true)
      .withOption('bFilter', false)
      .withOption('ajax', {
        url: 'data.json',
        dataType: 'json',
        type: "GET"
      })
      .withDataProp('data')
      .withOption('aLengthMenu', [10, 20, 50, 100, 500])
      .withOption('iDisplayLength', 10)
      .withPaginationType('full_numbers')
      .withOption('createdRow', function(row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
      });

    $scope.dtColumns = [
      DTColumnBuilder.newColumn('id').withTitle('Request #'),
      DTColumnBuilder.newColumn('type').withTitle('Type'),
      DTColumnBuilder.newColumn('name').withTitle('Name').notSortable(),
      DTColumnBuilder.newColumn('version').withTitle('Version/Revision/Id').notSortable(),
      DTColumnBuilder.newColumn('primaryContact').withTitle('Primary Contact'),
      DTColumnBuilder.newColumn('submittedDate').withTitle('Submitted Date'),
      DTColumnBuilder.newColumn('status').withTitle('Status'),
      DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
      .renderWith(function(data, type, full, meta) {
        if (data.status != "CLOSED") {
          return '<button class="btn btn-primary" ng-click="edit(' + data.id + ')">' +
            '   <i class="fa fa-eye"></i>' + "View" +
            '</button>&nbsp;' + '<button class="btn btn-warning" ng-click="edit(' + data.id + ')">' +
            '   <i class="fa fa-edit"></i>' + "Edit" +
            '</button>&nbsp;' +
            '<button class="btn btn-danger" ng-click="delete(' + data.id + ')">' +
            '   <i class="fa fa-trash-o"></i>' + "Delete"
          '</button>';
        } else {
          return '<button class="btn btn-primary" ng-click="edit(' + data.id + ')">' +
            '   <i class="fa fa-eye"></i>' + "View" +
            '</button>&nbsp;' + '<button class="btn btn-warning" ng-click="update(' + data.id + ')">' +
            '   <i class="fa fa-clipboard"></i>' + "Clone" +
            '</button>&nbsp;' +
            '<button class="btn btn-primary" ng-click="delete(' + data.id + ')">' +
            '   <i class="fa fa-refresh"></i>' + "Update"
          '</button>';
        }
      })

    ];
  });
})(angular);

{
  "data": [{
  "id": 860,
  "type": "type860",
  "name": "Foo",
  "version": "v1.0.0",
  "primaryContact": "abc@edf.fr",
  "submittedDate": "2014-12-18",
  "status": "OPEN"
}]
}