3

Im trying to display large data set using smart-table. Im contacting server with $http request and when I assign response data to $scope.rowCollection, application stuck for nearly 40 second until all data is displayed on page. In response json i got nearly 18000 results to display. I dont know if I do something wrong. I get response from server in 600 ms but after assign application stuck. It looks like smart-table is trying to make a copy of response in displayedCollection array and this operation take long time but its only my opinion. Please help. Thanks in advance.

HTML

 <table st-table="displayedCollection" st-safe-src="rowCollection" class="table">
    <thead>
        <tr>
            <th colspan="8"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
        </tr>
        <tr>
            <th st-sort="TestEndDate">Test Date</th>
            <th st-sort="Workplace">Workplace</th>
            <th st-sort="Tester">Worker</th>
            <th st-sort="SerialNo">Serial Number</th>
            <th st-sort="TestProgram">Testing program</th>
            <th st-sort="TestResult">Test Result</th>
            <th>Download</th>
            <th>Detail</th>
        </tr>

    </thead>
    <tbody>
        <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
            <td>{{row.TestEndDate | date}}</td>
            <td>{{row.Workplace}}</td>
            <td>{{row.Tester}}</td>
            <td>{{row.SerialNo}}</td>
            <td>{{row.TestProgram}}</td>
            <td>{{row.TestResult}}</td>
            <td>
                <button type="button" ng-click="downloadItem(row)" class="btn btn-sm btn-success">
                    <i class="glyphicon glyphicon-download">
                    </i>
                </button>
            </td>
            <td>
                <button type="button" ng-click="detailItem(row)" class="btn btn-sm btn-primary">
                    <i class="glyphicon glyphicon-eye-open">
                    </i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Javascript

        app.controller('AppController', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {

    var search = this;
    search.serials = [];

    $scope.rowCollection = [];


    $scope.init = function () {
        waitingDialog.show();//show loading 
        getTestResults();

    };

    var getTestResults = function () {
        $http({
            method: 'GET',
            url: "http://sqldev/api/testresults"
        }).then(function successCallback(response) {
            $scope.rowCollection = response.data;//after assign response.data into rowCollection application stuck
            waitingDialog.hide();//hide loading

        }, function errorCallback(response) {
            console.log('Error: ' + response);
            waitingDialog.hide();//hide loading
            $scope.open()//open modal with error message
        });

    };
}]);
mattafix19
  • 55
  • 1
  • 7

0 Answers0