Angular Datatables with ng-repeat

Question

I have an HTML table that is dynamically loaded from an ng-repeat directive and am using Datatable-AngularJS to modify it. The table looks something like this:

<table datatable="ng" class="row-border hover">
<thead>
    <tr>
        <th>Song Name</th>
        <th>Type</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="song in Songs">
        <td>{{song.song_name}}</td>
        <td>{{song.song_type}}</td>
    </tr>
</tbody>
</table>
</div>

Unfortunately, I keep getting an error in my console with TypeError: undefined is not a function. I THINK it's because of the way Angular-Datatables works. They ask you to include the bootstrapped files in this way:

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>
<script src="mybootstrap.js"></script>

But the thing is, when the datatables loads, the table has not been populated yet (because of the fact my bootstrapped js file is below that populates it. So I changed it to this:

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="mybootstrap.js"></script>
<script src="angular-datatables.min.js"></script>

But I still get the same error, when I put it like this:

<script src="angular.min.js"></script>
<script src="mybootstrap.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular-datatables.min.js"></script>

I get a loading... that does nothing below and the raw html table is loaded. I have a feeling it has something to do with the async nature of AngularJS and that datatables is being loaded before the table is being populated by my bootstrapped js file. How can I fix this? Any ideas?

This is the specific error: TypeError: undefined is not a function at Object.e [as showLoading] — q.Then
– q.Then, Commented Mar 4, 2015 at 18:08

l-lin · Accepted Answer · 2015-03-06 10:28:07Z

4

It seems your want to use the Angular renderer. So you need to add the ng value in your datatable directive:

<table datatable="ng" class="row-border hover">

answered Mar 6, 2015 at 10:28

l-lin

1,0751 gold badge11 silver badges20 bronze badges

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

1 Comment

q.Then Over a year ago

Oops, I included an outdated. I already included ng before, but all it did was give me a big Loading....

leunade · Accepted Answer · 2015-10-08 17:24:49Z

0

Try arranging to this:

<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="mybootstrap.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular-datatables.min.js"></script>

answered Oct 8, 2015 at 17:24

leunade

1

Comments

Sitti Munirah Abdul Razak · Accepted Answer · 2017-03-15 08:43:02Z

0

I did the one as suggested by I-lin and it works

<table datatable="ng" class="row-border hover">

answered Mar 15, 2017 at 8:43

Sitti Munirah Abdul Razak

1,11912 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular Datatables with ng-repeat

3 Answers 3

1 Comment

Comments

Comments

Your Answer

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

Related