Question

我有一个用ng-repeat初始化行的表：

    <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整个表格闪烁 - 消失并使用新的项目集合绘制自己。

我该怎样防止这种情况？

理想情况下，我想继续修改vm.items集合，而不是操纵表行（除非它们真的相同）。

Answer 1

当我们从datatable插入或删除行时，需要重新启动以显示更改。删除用于数据表的所有样式并重新呈现到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;
        }
    }
}

Answer 2

经过多次尝试和研究后，我不相信你在使用datatable="ng"时可以避免闪烁。

即使是官方的例子@ https://l-lin.github.io/angular-datatables/#/angularWayDataChange也会遇到这个问题。

添加从表中删除行 - 闪烁

2 个答案: