How to create basic angularjs directive with datatables

Question

How to create basic angularjs directive with datatables

My html:

<table data-table ng-show="bookings">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>ID number</th>
            <th>Email</th>
            <th>Cellphone</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="booking in bookings | orderBy:['student.firstname', 'student.surname']">
            <td>{{ booking.student.firstname }}</td>
            <td>{{ booking.student.surname }}</td>
            <td>{{ booking.student.id_number }}</td>
            <td>{{ booking.student.email }}</td>
            <td>{{ booking.student.cellphone }}</td>
        </tr>
    </tbody>
</table>

My directive:

.directive('dataTable', function() {
        return {
            restrict: 'A',
            replace: false,
            transclude: true,
            link: function (scope, el, attrs) {
                console.info('dataTable', el);
                $(el).dataTable();
            }
        }
    })

I don't get any error, but nothing is displayed (I cannot now know what the el is). I wish to use it where the info is transcluded, and then the 'zero configuration' of dataTable are used. I thought this would be simple, alas, directives :(

javascript
angularjs
jquery-datatables

Answer 1

Have you had a look at ng-grid? It's a native implementation that provides pagination / sorting etc.

But if you must use DataTables, have a look at this answer, I used the solution from here recently and it worked well: http://stackoverflow.com/a/16096071/2383201

Answer 2

You can't use data as a prefix for the attribute. Changing it to anything else, e.g. myTable (usage: my-table) will let the directive pick it up.

However, it can't seem to resolve the columns now, which means the only solution is the link given by @Skinty

Answer 3

You can also check the angular-datatables - Datables using angular directives project. It has a lot of examples on how to use angular directives with datatables.

I know this question is a bit old now but but I though it may help people who end up here searching for the same question.