angular-datatables在md-tab中的滚动条功能

Question

我已经搜索了很多小时，但找不到有用的答案。请帮我解决这个问题。

问题：我在 md-tab (Angular material) 中插入了 angular-datatables。一切正常，直到我添加 scrollY 或 scrollX 选项。当我添加滚动选项时，表格没有显示任何内容。这是代码

 <md-tabs md-dynamic-height md-selected="msWizard.selectedIndex" md-center-tabs="true">
                <md-tab>
                    <md-tab-label>
                        <span>Product</span>
                    </md-tab-label>

                    <md-tab-body>
<table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance"
                   dt-options="vm.dtOptions">
                <thead>
                    <tr>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">ID</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Image</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Name</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Category</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Price</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Quantity</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Active</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Actions</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="product in ::vm.products">
                        <td>{{product.id}}</td>
                        <td><img class="product-image" ng-src="{{product.image}}"></td>
                        <td>{{product.name}}</td>
                        <td>{{product.category}}</td>
                        <td>{{product.price}}</td>
                        <td>{{product.quantity}}</td>
                        <td>{{product.active}}</td>
                        <td>
                            <md-button class="edit-button md-icon-button" ng-click="vm.gotoProductDetail(product.id)" aria-label="Product details"
                                       translate translate-attr-aria-label="EC.PRODUCT_DETAILS">
                                <md-icon md-font-icon="icon-pencil" class="s16"></md-icon>
                            </md-button>
                        </td>
                    </tr>
                </tbody>
            </table>

这是我的 js 函数

 vm.dtOptions = {
        dom         : 'rt<"bottom"<"left"<"length"l>><"right"<"info"i><"pagination"p>>>',
        columnDefs  : [
             {

                targets: 0,
                width  : '10px'
            },
             {

                targets: 1,
                width  : '20px'
            },
            {

                targets: 2,
                width  : '72px'
            },
            {

                targets: 3,
                width  : '72px'
            },
            {

                targets: 4,
                width  : '72px'
            },
            {

                targets: 5,
                width  : '72px'
            },
            {

                targets: 6,
                width  : '72px'
            },
            {

                targets: 7,
                width  : '72px'
            },
            {

                targets: 8,
                width  : '72px'
            },

        ],
        pagingType: 'simple',
        autoWidth : false,
        pageLength  : 20,
        scrollY    : 'auto', //This line makes a problem
        responsive  : true,


    };

当我在 md-tab 之外使用这段代码时，它对我来说工作正常。我该如何解决这个问题。谁能帮我？顺便说一句，我已经按照示例包含 "datatables" 和 "datatables.scroller" 。

Answer 1

终于有了解决办法。解决方法很简单。正如我所提到的，table 在 html 代码中正确显示了数据，但它没有出现在页面中，所以我只设置了高度属性，如下所示。

 <div style="height: 700px;"   layout="column" flex>
    <table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions">
...

angular-datatables在md-tab中的滚动条功能

Scroller function of angular-datatables in md-tab

javascript

angularjs

scroll

angular-material

angular-datatables