user2258408 user2258408 - 2 months ago 28
AngularJS Question

Scroller function of angular-datatables in md-tab

I have been searching for many hours but I couldn't fine useful answer. Please help me fix this problem.

Problem: I inserted angular-datatables in md-tab (Angular material).
Everything worked fine until I added scrollY or scrollX option. The tables didn't show any content when I added the scroller option.
Here is the code

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


and here is my js function

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,


};


This code works fine for me when I use it outside md-tab.
How can I fix this problem. Can anyone help me?
By the way, I have already include "datatables" and "datatables.scroller" followed the example.

Answer

Finally, I have solution. The solution is very easy. As I have mentioned, the table showed data correctly in html code but it didn't appear in the page so I just only set height property as followed.

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