datatable在引導選項卡上重訪顯示沒有可用的數據

Question

我有一個選項卡中使用ng-repeat填充數據表。如果我訪問其他選項卡並回來，我的表格已填充，但顯示沒有可用的數據。 首先加載數據表的所有功能，如排序，搜索，分頁。作品。但重新審視沒有用。請幫幫我。

<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文件

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

指數控制器

(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

已經有在使用引導標籤的數據表文檔here

，所以你需要添加一個實例

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