AngularJS DataTables directive

Forked from: http://jsfiddle.net/zdam/pb9ba/ Cishionne

by hoverwu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.0.0/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/select/1.0.0/css/select.dataTables.min.css">
<div id="tableExample">
    <div ng-controller="pageController">
        <p>jQuery DataTable and Master/detail using the same results</p>

        <h1>DataTable</h1>
        <table datatable options="dataTableOptions" items="contacts"></table>
        
        <h1>Master/detail</h1>
        <ul ng-repeat="contact in contacts">
            <li>
                <label>
                    <input type="checkbox" ng-model="contact.selected">
                    [{{contact.id}}] {{contact.firstName}} {{contact.lastName}}
                </label>
            </li>
        </ul>
        
        <h1>Selections</h1>
        <code>{{selections()}}</code>
        
    </div>
</div>

CSS

body { font-family: Arial; margin: 10px 15px; }
h1 { font-size: 20px; margin-top: 25px; margin-bottom: 5px; }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>

JavaScript

var app = angular.module('tableExample', []);

console.clear();

app.directive('datatable', function () {
    return {
        restrict: 'E, A, C',
        link: function (scope, element, attrs, controller) {
            //scope - directive internal scope

            var dataTable = element.dataTable(scope.options); //init plugin
            
            var mapToDatatableFormat = function (data) {
            	return data.map(scope.options.columnMap)
            }
            
            scope.$watch('items', function (newData) {
                console.log("new items:", scope.options);
                if (newData) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData( mapToDatatableFormat(newData) )
                }
            }, true);
            
            dataTable.on('select', function (e, dt, type, indexes) {
               
                var rowData = table.rows( indexes ).data().toArray();
            });
            dataTable.on('deselect', function (e, dt, type, indexes) {
             alert('ddd');
                var rowData = table.rows( indexes ).data().toArray();
            });
            
        },
        scope: {
            options: "=",
            items: "="
        }
    };
});

app.controller('pageController', function ($scope) {
    $scope.contacts = [
        { id: 1, firstName: "John", lastName: "Smith" },
          { id: 1, firstName: "John", lastName: "Smith" },
            { id: 1, firstName: "John", lastName: "Smith" },
              { id: 1, firstName: "John", lastName: "Smith" },
                { id: 1, firstName: "John", lastName: "Smith" },
                  { id: 1, firstName: "John", lastName: "Smith" },
                    { id: 1, firstName: "John", lastName: "Smith" },
                      { id: 1, firstName: "John", lastName: "Smith" },
                        { id: 1, firstName: "John", lastName: "Smith" },
                          { id: 1, firstName: "John", lastName:...