Datentabelle in Bootstrap-Registerkarte auf Revisit zeigt keine Daten verfügbar

Question

Ich habe Datentabelle mit ng-repeat in einem Tab gefüllt. Wenn ich eine andere Registerkarte besuche und zurückkomme, ist meine Tabelle zwar ausgefüllt, zeigt aber keine Daten an. Beim ersten Laden alle Merkmale der Datentabelle wie Sortieren, Suchen, Paging. funktioniert. aber auf Wiedersehen funktioniert nichts. Bitte hilf mir.

<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 Datei

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

Index-Controller ist

(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

Es ist bereits ein Beispiel in Datatable-Dokumentation, die here Bootstrap Registerkarte

so müssen Sie hinzufügen

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