Material Design Lite table refresh issue with AngularJS

Question

I am using mdl-data-table mdl-js-data-table and ng-repeat to implement a simple pagination feature. It works, but has an annoying issue: whenever I turn a page, the table flashes. e.g. if the table has 20 rows and each page has 10, mdl table will first display 20 then within tenth of a second, shrink that into 10 rows.

If I remove class mdl-data-table mdl-js-data-table and just use table, everything works fine, no flash at all. But I lost MDL style of course.

I wonder if both angular and MDL updates DOM, and somehow MDL update the table twice. But I don't know where to look at to fix it. calling mdl window.componentHandler.upgradeAllRegistered(); doesn't seem matter one way or the other.

Please help. Thanks.

part of the code is as below. initData function just sets the initial value for pagination variables and data array.

<div ng-init="initData()"></div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table__cell--non-numeric">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="n in datalists | pagination: curPage * pageSize | limitTo: pageSize" ng-controller="VhlCtrl">
            <td>{{$index}}</td>
        </tr>
    </tbody>
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">
        <i class="material-icons">skip_previous</i>
    </button>
    Page {{curPage + 1}} of {{ numberOfPages() }}
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage >= datalists.length/pageSize - 1" ng-click="curPage = curPage+1">
        <i class="material-icons">skip_next</i>
    </button>
</table>

Please share some of your code, it is difficult to pinpoint the exact cause of the problem without it. Welcome to StackOverflow. — plamut
– plamut, Commented Sep 26, 2015 at 1:51

Pascal · Accepted Answer · 2015-09-30 06:28:43Z

1

MDL is for static websites and not for webapps.

consider using Angular Material

answered Sep 30, 2015 at 6:28

Pascal

1595 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jay.m Over a year ago

Yes, that's what MDL owner said too. Angular Material does not have table component and nav bar component.

solosodium · Accepted Answer · 2016-07-27 15:47:02Z

I found what is causing the problem is the mdl-data-table class and the background color change animation. So I ended up creating a new table class by copying the style of the material design table minus the background transition. Here is the CSS:

.my-table {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .12);
    border-collapse: collapse;
    font-size: 14px;
    background-color: #ffffff;
}
.my-table th, td {
    position: relative;
    vertical-align: middle;
    text-align: left;
    text-overflow: ellipsis;
    height: 48px;
    box-sizing: border-box;
    padding: 12px 12px 12px 18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.my-table th {
    font-size: 12px;
    color: rgba(0, 0, 0, .54);
    font-weight: bold;
}

Replace mdl-data-table with my-table class to table, although it's not actually fixing the repeated data-binding in AngularJS, it should work.

Iamisti · Accepted Answer · 2016-07-28 07:57:04Z

0

Don't waste your time building up your table. Use mdDataTable available in npm and in bower

Link: https://github.com/iamisti/mdDataTable

Here is the demo of it: http://iamisti.github.io/mdDataTable/

answered Jul 28, 2016 at 7:57

Iamisti

1,71015 silver badges30 bronze badges

Collectives™ on Stack Overflow

Material Design Lite table refresh issue with AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related