How to create basic angularjs directive with datatables

Question

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 :(

Btw, did you checked [angular-table](http://angulartable.com/)? — Atropo, Feb 12 '14 at 11:05
@Atropo thanks for that, although I must have filtering box and pagination — Tjorriemorrie, Feb 13 '14 at 07:03

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

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: https://stackoverflow.com/a/16096071/2383201

edited May 23 '17 at 11:58

Community

1
1

answered Feb 12 '14 at 11:09

Skinty

13
1
3

I have seen that example. It's not really what I'm hoping to do. It has too much config which can be done via transclusion – Tjorriemorrie Feb 13 '14 at 07:02

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

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

edited May 23 '17 at 12:06

Community

1
1

answered Feb 14 '14 at 06:53

Tjorriemorrie

16,818
20
89
131

score 0 · Answer 3 · answered Dec 13 '14 at 03:22

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.

How to create basic angularjs directive with datatables

3 Answers3