Javascript 从数据库加载数据而不闪烁

我用angualar js将数据从数据库加载到html表格中。我还使用interval，以便每10秒重新加载一次表，以获取其他用户刚刚输入的新数据

问题： 每次重新加载时，表都会闪烁。使页面看起来很有趣，就像有小故障一样

我在找什么： 有没有一种方法可以让新数据从表的顶部滑入并成为第一名，而其他数据在其下方重新调整并成为第二名、第三名等等。我相信Angular Js是我选择它而不是使用常用AJAX的神奇原因

角度代码

 var supDetails = angular.module("supDetails", ['datatables']);

     supDetails.controller('supportController', function($scope, $http, $interval) {
          $scope.names = [];
$scope.isFirst = true;
$scope.loadData = function() {    
    var httpRequest = $http({
        method: 'GET',
        url: 'anfil.php?ins=sup'

    }).success(function(data, status) {
    console.log('loading..');
        $scope.names = data;

       if(!$scope.isFirst){
          angular.forEach(data,function(key,val){
            $scope.names[key] = data[key];
          });
        }            
        $scope.isFirst = false;
    });

};

         $scope.loadData();

// Function to replicate setInterval using $timeout service.

   $interval(function () {
         $scope.loadData();
}, 10000);

    });

我的HTML

 <!-- /.col -->
    <div class="col-md-9" ng-app = "supDetails" ng-controller="supportController">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Messages</h3>
          <!-- /.box-tools -->
           <div class="box-tools pull-right">
            <div class="has-feedback">
             <button type="button" ng-click="loadData()" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
            </div>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body no-padding">

          <div class="mailbox-messages">
            <table datatable="ng" class="table table-hover table-striped">
             <thead>
            <tr>
              <th>Stat</th>
              <th>Name</th>
              <th>Problem</th>
              <th>Time</th>
            </tr>
            </thead>
              <tbody>
              <tr ng-repeat="x in names">
                <td class="mailbox-star"><a href="#"><i class="fa fa-circle text-blue"></i></a></td>
                <td class="mailbox-name"><a href="read-mail.html">{{x.user_id}}</a></td>
                <td class="mailbox-subject"><b>{{x.ticket_title}}</b> - {{x.subject}}
                </td>
                <td class="mailbox-date">{{x.ticket_open_date}}</td>
              </tr>

              </tbody>
              <tfoot>
                 <tr>
              <th>Stat</th>
              <th>Name</th>
              <th>Problem</th>
              <th>Time</th>
            </tr>
              </tfoot>
            </table>
            <!-- /.table -->
          </div>
          <!-- /.mail-box-messages -->
        </div>
        <!-- /.box-body -->
        </div>
      <!-- /. box -->
    </div>
    <!-- /.col -->

信息
斯达
名称
问题
时间
{{x.ticket_title}}-{x.subject}
{{x.票务{u打开日期}
斯达
名称
问题
时间

有几种方法可以解决您的问题：

1） 编写算法，加载数据，然后将其与现有数据进行比较。如果有任何差异，您应该只向表中添加新记录

---

2） 使用WebSocket，它们将使您能够从服务器上实时获取新记录。

我认为是您的css问题，它没有最小高度，正如您在这段代码中看到的，它不会闪烁

如果您仍然希望数据以从上到下的幻灯片形式显示，您可以取消对答案中代码的注释，这样它将从表中逐个删除行，并用新的行替换

var-app=angular.module（'myApp'，[]）；
函数PeopleCtrl（$scope、$http、$interval）{
$scope.people=[]；
$scope.isFirst=true；
$scope.loadPeople=function（）{
var httpRequest=$http({
方法：“GET”，
网址：'https://jsonplaceholder.typicode.com/users'
}).成功（功能（数据、状态）{
console.log（'loading..'）；
$scope.people=数据；
/*如果（！$scope.isFirst）{
角度.forEach（数据、函数（val、键）{
$scope.people[key]=数据[key]；
});
}            
$scope.isFirst=false*/
});
};
$scope.loadPeople（）；
$interval（函数（）{
$scope.loadPeople（）；
}, 10000);
}

身份证件
名称
UserNmae
{{person.id}
{{person.name}
{{person.username}

谢谢你让我开心，浏览这些网页时我几乎不笑。“我被迫相信角Js是神奇的”。是的，令人惊讶的是，这不是魔法。你可以问谷歌的奇才是谁写的；）如果您仍然希望数据从上到下滑动显示，您可以通过这种方式取消对答案中代码的注释，它将从表中逐行删除并替换为新代码。我的表仍在闪烁。与此类似，整个表再次加载相同的示例，但不是仅加载10个用户的表。让它增加到11，12等等。让我看看会不会bling@nsikak你必须分享一些代码，这样我们才能找出问题所在。你已经更新了我的代码，以显示我的HTML以及我添加的代码。我也在使用引导。还有一个我的控制台，它不闪烁，但在桌子上闪烁