datatable dans l'onglet bootstrap sur revisit montre aucune donnée disponible

Question

J'ai datatable peuplé en utilisant ng-repeat dans un onglet. Si je visite un autre onglet et que je reviens, ma table est remplie mais ne montre aucune donnée disponible. Au premier chargement toutes les fonctionnalités de datatable comme le tri, la recherche, la pagination. travaux. mais sur revisiter rien ne fonctionne. Aidez-moi, s'il vous plaît.

<table id="example" class="books-table table table-striped" ui-jq="dataTable" datatable="ng" ui-options="dataOpt" > 
    <thead> 
     <tr> 
     <th>Book name</th> 
     <th>Author</th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr dt-rows ng-repeat="book in data" emit-last-repeat-element> 
     <td>{{book.from}}</td> 
     <td>{{book.to}}</td> 
     <td class="action-icons"> 
      <a href="#/books/edit/{{book._id}}" class="btn btn-default"><i class="glyphicon glyphicon-pencil"></i></a> 
     </td> 
     </tr> 
    </tbody> 
</table> 

app.js fichier

angular 
.module('app', ['ui.router','ui.bootstrap','ui.utils','datatables']) 
.config(config) 
.run(run); 
//here all the state provider code.. 

contrôleur d'index est

(function() { 
    'use strict'; 
    angular 
     .module('app') 
     .controller('Books.IndexController', Controller); 

    function Controller(BookService,UserService,$scope) { 
     var vm = this; 
     vm.userid=null; 
     vm.books = []; 
     $scope.data=[]; 

     initController(); 

     function initController() { 

       UserService.GetCurrent().then(function (user) { 
       vm.userid = user._id; 

       }); 
       vm.loading = true; 
      BookService.GetAll() 
       .then(function (books) { 
        vm.loading = false; 
        vm.books = books; 
        $scope.data=vm.books; 
       }); 
     } 

     $(document).ready(function(){ 
      var table=$('#example').DataTable(); 
     }); 

    } 
})(); 

Answer 1

Il existe déjà un exemple dans DataTable docs qui utilisent l'onglet bootstrap here

si vous avez besoin d'ajouter

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    $.fn.dataTable.tables({visible: true, api: true}).columns.adjust(); 
});