current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm adding AngularJS to a project that is heavily dependent on jQuery's datatables plugin.

In my angular view, I have the datatables code (which only loads when the view is loaded).

Ex:

$('#datatable').DataTable();

In my layout, which is rendered by the server (everything else is rendered by the client), I have <script> tags for each of the JavaScript files.

However, when I load the page, all of the data comes in without the pagination and when I click a sorter (up or down), I see my Angular templating i.e. {{record.name}} and {{record.time}} in the first row and my data disappears.

The only table that is working with jQuery datatables is a table with a very small amount of records (6). Even then, it works intermittently.

This has lead me to believe that it's a problem with some data loading before/after (depending on the amount of data) the scripts do.

I know there are alternatives and directives out there, but I have yet to find one that works properly and does everything the native plugin does. So please, do not suggest any of those to me.

If it is a problem with the order of the data/scripts loading and one needs to load before another, I'm fine with adding a delay until everything has finished loading.

Does this seem like it's the problem? How can I test this?

Edit:

Another note to take: when everything has finished loading, and I enter in the console $('#datatable').DataTable(); it applies all of the datatables features.

The datatables code in my angular view is surrounded in a $(function() { //code });

This is how I get the data (for every table):

app.controller('PaymentsCtrl', function($scope, Payments) {
    Payments.get()
        .success(function(data) {
            $scope.payments = data.payments;
        });
});

I then run an ng-repeat on the table's <tr>

share|improve this question
1  
It's hard to say without some code to reference. However, I built a directive to handle my various custom datatables and they work great so you may not want to throw away that option. –  Matthew Green Oct 22 '14 at 16:47
    
I could post the code it wouldn't tell you much. It's just datatables in an Angular view, surrounded by $(function() {}); –  user4097807 Oct 22 '14 at 16:48
    
I'll take a look at the directive but that's not really what I'm looking for as I said. –  user4097807 Oct 22 '14 at 16:48
    
When you say 'the' directive are you talking about using a pre-built directive? That may be why you are turned off from it. My directives are custom made for the table I want to display and I haven't had any issues using the features datatables offers. –  Matthew Green Oct 22 '14 at 16:59
    
Also another note, when I put HTML in the table instead of loading it through my API endpoint there are no problems. –  user4097807 Oct 22 '14 at 17:08

1 Answer 1

up vote 0 down vote accepted
+50

Directives are the correct way to wrap external libraries, so that's how you would want to invoke your DataTable. I haven't used jquery DataTables with Angular before, since it's a bit of an anti-pattern (though I understand it's unavoidable here), but if it's merely a case of invoking $().DataTables() at the correct time, then this directive should do it - keep in mind that jquery and datatables' tags should be included BEFORE angular.js so that Angular replaces jqlite with jquery internally - this way, the element param here is automatically wrapping the element with jquery for you, and should allow you to call the DataTable function.

angular.module('yourModule').directive('datatable', function() {
  return {
    restrict: 'AC',
    link: function(scope, element, attrs) {
      element.DataTable();
    }
  }
});

With that directive, rather than giving your table an ID #datatable, just add a "datatable" class or attribute and let the directive handle it from there!

share|improve this answer
    
I'm having the same problem, data is showing in the table but datatables isn't recognizing that. –  user4097807 Oct 27 '14 at 18:14
    
This is most likely related to the data coming in async. Basically, you need to wait on firing your DataTables function until your data is ready. I wrote up a quick plunk that uses promises in the directive so it won't fire DataTables() until it sees a truthy value in a "ready" attribute: plnkr.co/edit/Fyw4ctKsEhiVG05H6RjV?p=preview –  jaawerth Oct 27 '14 at 19:33
    
The alternative would be to pull the markup for the table itself as an Angular template in the directive, and pass the data into the directive via isolate scope. Doing that, you could take a similar approach with scope.$watch to wait for the data to come in within the directive - this would also make it easier to correctly rerender upon data changes, which my sample directive above isn't set up to handle. –  jaawerth Oct 27 '14 at 19:40
    
jaawerth the legend. –  user4097807 Oct 27 '14 at 20:31
    
Haha - for anyone else who might come across upon this question, the plunk has been changed a little to work with Angular 1.2.5 –  jaawerth Oct 27 '14 at 20:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.