swimlane / angular-data-table

A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets!
http://swimlane.github.io/angular-data-table/
MIT License
577 stars 142 forks source link

Lazy loading not working when refreshing data #123

Open michaelkrnac opened 8 years ago

michaelkrnac commented 8 years ago

See Example here: http://codepen.io/anon/pen/bEqdNR

Table shows "Loading..." the first time. If i update the data with a function by clicking the button "Loading..." will not appear.

amcdnl commented 8 years ago

interesting, i got a slightly different result but still not correct. i'll investigate.

ghost commented 8 years ago

Your table was too high. The message "Loading..." is displayed after all the records. See this example: http://codepen.io/anon/pen/JXPybX

What you want is to clear all the table and have only the loading message displayed?

michaelkrnac commented 8 years ago

Correct.

  1. User requests new Data
  2. Clear table and show loading
  3. When AJAX request is complete show new data in table.
ghost commented 8 years ago

As a workaround I suggest you this solution: http://codepen.io/anon/pen/JXPybX

In your reload function, first set the data to an empty array, then use a timeout with 0ms of delay to set the data array to undefined. Somehow, the data-table will first notice it has no records (the empty message will blink) and then notice it has no data source provided (the loading message will be displayed).

$scope.reload = function() {
  // Empty the $scope.data array with one of these instructions:
  $scope.data.splice(0, $scope.data.length);
  // $scope.data = [];

  // This timeout with 0 ms delay the execution of "$scope.data = undefined;" by few instructions.
  $timeout(function() {
    $scope.data = undefined;
    $timeout(function() {
      $http.get('https://cdn.rawgit.com/Swimlane/angular-data-table/master/demos/data/100.json')
        .success(function(data) {
          $scope.data = data.slice(0, 2);
        });
    }, 2000);
  }, 0);
};

It appears the data-table will not clear automatically the data set by declaring it undefined if it was previously filled. If it was empty, then the $scope.data = undefined; will work, but only with the delay.

@amcdnl Does this example will help fixing the issue?

simonerni commented 8 years ago

Hey I'm struggling with this issue as well, is there any progress on the issue? Thank you!