2016-07-05 2 views
0

У меня есть таблица со строками инициализированных с нг-повтора:Добавление удаление строк из таблицы - мерцающий

<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, а не манипулировать строками таблиц (если они на самом деле не совпадают).

ответ

0

Когда мы вставляем или удаляем строки из datatable, вам нужно повторно открыть, чтобы показать change.it удаляет все стили, используемые для datatable и re-renders to 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; 
     } 
    } 
} 
Смежные вопросы