0

I currently am using angularJS with Jquery datatables however when I load the data back from my $http.get() request it goes into datatables but give No data avaliable. I believe this is due to datatables loading before I get the data back. Is there anyway to fix this? Here is a something similar to my code https://codepen.io/anon/pen/VrQzoP

HTML: 

  <div class="container" ng-app="formvalid">
  <div class="panel" data-ng-controller="validationCtrl">
  <div class="panel-heading border">    
    <h2>Data table using jquery datatable in Angularjs
    </h2>
  </div>
  <div class="panel-body">
      <table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Position</th>
        </tr>
      </thead>
        <tbody>
          <tr ng-repeat="n in Data">
            <td>{{n.base}}</td>
            <td>{{n.date}}</td>
            <td>{{n.rates}</td>
          </tr>
        </tbody>
    </table>
  </div>
</div>
</div>

CSS:

 table tr th{
  background:#337ab7;
  color:white;
  text-align:left;
  vertical-align:center;
}

JS:

//Angularjs and jquery.datatable with ui.bootstrap and ui.utils

var app=angular.module('formvalid', ['ui.bootstrap', 'ui.utils']);
app.controller('validationCtrl',function($scope, $http){
 $http.get("http://api.fixer.io/latest?base=USD").then(function(r){
   $scope.Data = r.data;
 });
});
C McCoy
  • 56
  • 9
  • 1
    Check console for errors, because your example is working fine for me, I found that you simply needed `https://` instead of `http://` for your API link, and you also have some typos in the database: `{{x.peak24}` --> `{{x.peak24}}` – Aleksey Solovey Nov 20 '17 at 16:17
  • What happens if you try to sort the data? For me is disappears. – C McCoy Nov 20 '17 at 16:20
  • AngularJS and jQuery don't mix so well, you can either switch to alternative tables made for AngularJS (**ngGrid**, ngTable, _Smart Table_, etc.), or find a way to [combine them together](https://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs) – Aleksey Solovey Nov 20 '17 at 16:29
  • Kind of sad they don't mix. – C McCoy Nov 20 '17 at 16:42
  • I believe it's not part of digest cycle, so for them to work you need to `$apply` jQuery code, that's where directories and complications come in – Aleksey Solovey Nov 20 '17 at 16:46

0 Answers0