响应数据表不适用于动态添加的行

Question

我有一个数据表，其中包含Datatables响应式扩展。当表缩小时，右边的列会按预期隐藏。但是，如果我动态添加另一行数据，则新行不会获得隐藏列。

我尝试将表绑定如下：

var table = $('.mytable').DataTable({ responsive: true });

然后，在向表中动态附加数据行之后，我尝试使用这些命令重新初始化响应，如文档（https://datatables.net/reference/api/responsive.recalc%28%29）中所述：

table.columns.adjust();
table.responsive.recalc();

我也试过了responsive.rebuild() - 没有运气的功能。任何人都知道如何对此进行排序？

编辑，以下是如何追加行的简化说明

function step_data(step_id, nextstep)
    {
        var data = '<tr id="row_' + step_id + '"><td>' + nextstep + '</td><td>(values)</span></td><td>(data)</td><td><button>Button</button></td></tr>';
        return data;
    }
$('#addstep').click(function(e){
        e.preventDefault();
        $.post(
           '/control/addstep',
           {'timeline_id':(xxx) }, 
           function(data){
              var row = step_data(data, nextstep);
              $('#sortablearea').append(row);
              nextstep++;
              table.columns.adjust();
              table.responsive.recalc(); // this doesn't have effect
            }
        );
    });

添加的行会破坏移动布局，并且所有列在添加的行中都可见（第4行加载了页面，第5行是动态添加的）：

Answer 1

您不应该使用append()附加新行，因为jQuery DataTables不知道这个新行，因此无法使其响应。

使用row.add() API方法添加新行。之后您无需致电columns.adjust()和responsive.recalc()。

例如，请使用以下代码，而不是调用step_data()和append()：

var rowNode = table
   .row.add( [ nextstep, '(values)', '(data)', '<button>Button</button>' ] )
   .draw()
   .node();

$( rowNode )
   .attr( 'id', 'row_' + data )