從表中添加刪除行 - 閃爍

Question

我有一個表與NG-重複初始化行：

<table class="dataTable row-border hover" datatable="ng" dt-options="vm.dtOptions"> 
    ... 
    <tr ng-repeat="item in vm.items"> 

我的選擇是：

//Reference at https://datatables.net/reference/option/ 
vm.dtOptions = { 
    paging : false, 
    searching : false, 
    info  : false, 
    autoWidth : false, 
    ordering : false, 
    responsive: true 
    }; 

問題

當我修改vm.items，與vm.items.push(...)或vm.items.splice整個表閃爍 - 消失並與新col自身物品的選擇。

我該如何預防？

理想情況下，我想繼續修改vm.items集合，而不是操縱表格行（除非它們確實相同）。

Answer 1

經過更多的嘗試和研究，我不相信你可以避免在使用datatable="ng"時閃爍。

即使官方示例@https://l-lin.github.io/angular-datatables/#/angularWayDataChange患有此問題。

Answer 2

當我們從數據表插入或刪除行時，它需要重新顯示changes.it刪除用於數據表的所有樣式並重新呈現給table.so需要保留這些樣式。 以下的CSS類可以使它更加流暢。

<table class="avoid-table-flicker dataTable row-border hover" datatable="ng" dt-options="vm.dtOptions"> 

.avoid-table-flicker{ 
    border-top: none !important; 
    width:100% !important; 
    border-collapse: separate !important; 
    background: #fff !important; 
    clear: both; 
    border-spacing: 0; 
    thead{ 
     th{ 
      text-align:left; 
      vertical-align: middle; 
      padding: 16px 8px; 
     } 
    } 
    tbody{ 
     td:first-child { 
      padding-left: 24px; 
     } 
     td{ 
      padding: 12px 8px; 
      vertical-align: middle; 
     } 
    } 
}