추가, 제거 행 -

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; 
     } 
    } 
}