AngularJs - DataTables Directive

by douglasloyo

HTML

<link rel="stylesheet" href="http://l-lin.github.io/angular-datatables/archives/dist/css/angular-datatables.css">
<script src="http://l-lin.github.io/angular-datatables/archives/vendor/jquery/dist/jquery.js"></script>
<script src="http://l-lin.github.io/angular-datatables/archives/vendor/datatables/media/js/jquery.dataTables.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/archives/dist/angular-datatables.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
    <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
    <thead>
      <tr>
        <th>Id</th>
        <th>Grade</th>
        <th>Text</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="s in data">
        <td>{{s.id}}</td>
        <td>{{s.gradeText}}</td>
        <td>{{s.text}}</td>
      </tr>
    </tbody>
    </table>
</div>
</div>

JavaScript

$((function(){console.log("here")}));
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "grade-level-pre": function ( a ) {
        var x = (a == "-") ? 0 : a.replace( /st grade/, "" ).replace( /nd grade/, "" ).replace( /th grade/, "" );
        console.log(x);
        
        return parseInt( x );
    },
 
    "grade-level-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
 
    "grade-level-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

/* Application */
var myApp = angular.module('myApp', ['datatables']);

myApp.controller('homeController', function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {

		$scope.dtOptions = DTOptionsBuilder.newOptions();
        /*.withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withDOM('pitrfl');*/
        
    $scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(1).withOption('type', 'grade-level')
    ];
    
    console.log($scope.dtColumnDefs)
	//$scope.hello = "Hi!";
  $scope.data = [
  {id:1, gradeLevel: 1, gradeText:"1st grade", text: "a" },
  {id:2, gradeLevel: 2, gradeText:"2nd grade", text: "e" },
  {id:3, gradeLevel: 3, gradeText:"3rd grade", text: "d" },
  {id:4, gradeLevel: 4, gradeText:"4th grade", text: "c" },
  {id:5, gradeLevel: 5, gradeText:"5th grade", text: "b" },
  {id:6, gradeLevel: 6, gradeText:"6th grade", text: "f" },
  {id:7, gradeLevel: 7, gradeText:"7th grade", text: "g" },
  {id:8, gradeLevel: 8, gradeText:"8th grade", text: "h" },
  {id:9, gradeLevel: 9, gradeText:"9th grade", text: "i" },
  {id:10, gradeLevel: 10, gradeText:"10th grade", text: "j" },
  {id:11, gradeLevel: 11, gradeText:"11th grade", text: "k" },
  {id:12, gradeLevel: 12, gradeText:"12th grade", text: "l" }
  ];
});