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

在datatable docs中已经有一个使用bootstrap tab here

的例子

所以你需要添加

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

重新访问的bootstrap选项卡中的数据表显示没有可用的数据

1 个答案: