daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 520 forks source link

md-table-pagination: page crash after click on pages, options dropdown- per page 100 records #543

Open parthakbari opened 7 years ago

parthakbari commented 7 years ago

One page contain around 100 records. when i clicked on pages or "md-limit-options" then pages appearing blank (crash).

here is my HTML code

<md-table-container>
                <table md-table ng-model="selected" class="table table-striped custom-table">
                    <thead md-head md-order="query.order" md-on-reorder="GetErrorLogData">
                        <tr md-row>
                            <th md-column md-order-by="Sequence" class="text-right" style="width:10%;" ng-click="GetColumnName('Sequence')">Seq #</th>
                            <th md-column md-order-by="Host" style="width:15%;" ng-click="GetColumnName('Host')">Host</th>
                            <th md-column md-order-by="StatusCode" style="width:10%;" class="text-right" ng-click="GetColumnName('StatusCode')">Code</th>
                            <th md-column style="width:50%;">Message</th>
                            <th md-column style="width:15%;" md-order-by="TimeUtc" ng-click="GetColumnName('TimeUtc')">Date Time</th>
                        </tr>
                    </thead>
                    <tbody md-body>
                        <tr md-row ng-repeat="log in ErrorLogList | orderBy:reverse">
                            <td md-cell class="text-right">{{log.Sequence}}</td>
                            <td md-cell>{{log.Host}}</td>
                            <td md-cell class="text-right">{{log.StatusCode}}</td>
                            <td md-cell class="MessageWidth">{{log.Message}}</td>
                            <td md-cell>{{log.TimeUtc}}</td>
                        </tr>
                    </tbody>
                </table>
            </md-table-container>
            <md-table-pagination md-limit="query.limit" md-limit-options="[100, 150, 200]" md-page="query.page" md-total="{{TotalRecords}}" md-on-paginate="GetErrorLogData" md-page-select class="md-table-pagination"></md-table-pagination>

JS Code

$scope.query = {
        order: 'Sequence',
        limit: 50,
        page: 1,
        reverse: false,
    };

TotalRecords : 542

after click on "md-limit-options" pages is black but when i drag mouse near pagination then able to see hand icon so, if i click then it's loading selected records

Is there any way to stop blank page after clicking on "md-limit-options"?

if need extra information then let me know.

1(Load the page) 2(Scroll down up to bottom) 3 (after click on options ,page set to blank)

here, 100,150,200, options also hide. when i drag mouse on particular area then mouse icon appear in hand icon.