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

@Atropo thanks for that, although I must have filtering box and pagination — Tjorriemorrie
– Tjorriemorrie, Commented Feb 13, 2014 at 7:03

Community · Accepted Answer · 2017-05-23 11:58:19Z

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, 2017 at 11:58

CommunityBot

11 silver badge

answered Feb 12, 2014 at 11:09

Skinty

131 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tjorriemorrie Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:06:08Z

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, 2017 at 12:06

CommunityBot

11 silver badge

answered Feb 14, 2014 at 6:53

Tjorriemorrie

17.4k21 gold badges97 silver badges133 bronze badges

Comments

Nandana · Accepted Answer · 2014-12-13 03:22:13Z

0

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.

answered Dec 13, 2014 at 3:22

Nandana

1,2308 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to create basic angularjs directive with datatables

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related