AngularJS 1.0rc1 dataTables

by zdam

HTML

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
 
<div ng-app="tableExample">
    <div ng-controller="Ctrl">   
        <button ng-click="addData()">Add Data</button>
        
        <h2>This table uses columns defined in controller</h2>          
        <table my-table 
            ao-columns="tblColumns" 
            ao-column-Defs="[{ 'bSortable': false, 'aTargets': [1] }]" 
            aa-data="tblData" >
        </table>        

        <br/>
        <h2>This table uses explicit columns in dom, but can still use aoColumnDefs for fine grained control</h2>
        <h3>- using explicit columns provides a better designer experience </h3>
        <table my-table aa-data="tblData" ao-column-Defs="columnDefs" >
            <thead>
            <tr>
                <th>Surname</th>
                <th style="width:70px">First name</th>
            </tr>
            </thead>
        </table>

        <h2>This table uses columns and core DataTable options defined in controller</h2>  
        
        <table my-table="overrideOptions" 
            ao-columns="tblColumns" 
            aa-data="tblData" >
        </table>
        

        <br/>        
    </div>
</div>

CSS

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>

<script src="http://code.angularjs.org/angular-1.0.0rc1.js"></script>
<style>

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }
.ui-helper-hidden { display: none;}

JavaScript

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

    dialogApp.directive('myTable', function() {
        return function(scope, element, attrs) {

            // apply DataTable options, use defaults if none specified by user
            var options = {};
            if (attrs.myTable.length > 0) {
                options = scope.$eval(attrs.myTable);
            } else {
                options = {
                    "bStateSave": true,
                    "iCookieDuration": 2419200, /* 1 month */
                    "bJQueryUI": true,
                    "bPaginate": false,
                    "bLengthChange": false,
                    "bFilter": false,
                    "bInfo": false,
                    "bDestroy": true
                };
            }

            // Tell the dataTables plugin what columns to use
            // We can either derive them from the dom, or use setup from the controller           
            var explicitColumns = [];
            element.find('th').each(function(index, elem) {
                explicitColumns.push($(elem).text());
            });
            if (explicitColumns.length > 0) {
                options["aoColumns"] = explicitColumns;
            } else if (attrs.aoColumns) {
                options["aoColumns"] = scope.$eval(attrs.aoColumns);
            }

            // aoColumnDefs is dataTables way of providing fine control over column config
            if (attrs.aoColumnDefs) {
                options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
            }

            // apply the plugin
            var dataTable = element.dataTable(options);

            // watch for any changes to our data, rebuild the DataTable
            scope.$watch(attrs.aaData, function(value) {
                var val = value || null;
                if (val) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(scope.$eval(attrs.aaData));
                }
            });
       ...