基于列的DataTables row.add（）

Question

我有一张桌子：

<table class="table table-bordered table-hover" id="user-table">
  <thead>
    <tr>
      <th data-field="id">Id</th>
      <th data-field="name">Name</th>
      <th data-field="email">Email</th>
      <th data-field="company">Company</th>
      <th data-field="actions">Actions</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>[email protected]</td>
        <td>Doe Inc.</td>
        <td>
          <div class="btn-group">
            <a href="{{ route('user.edit', ['id' => $user->id]) }}" class="btn btn-default btn-xs" title="Edit"><i class="fa fa-pencil"></i></a>
          </div>
        </td>
      </tr>
  </tbody>
</table>

我目前添加行的方式：

var columns = $.map(data,function(v,k){
    return v;
});

var rowNode = table.row.add(columns).order([0, 'desc']).draw(false).node();

$(rowNode).addClass('selected');
setTimeout(function(){$(rowNode).removeClass('selected');}, 2000);

我的数据如下：

{
"data":[ {
      "id": 2,
      "name": "Jane Doe",
      "email": "[email protected]",
      "company": "Doe Inc."
    }
]
}

有没有办法根据列添加行？我可以使用v直接插入data[0]，而不是在映射数据上返回row.add()。我一直在寻找，但无法得到确切的情况。

显然，目的是改组数据。在一个有15列的表中，我不必担心正确的列安排。

我发现这个https://datatables.net/reference/api/row.add()示例＃1，但显然文档说：

用于新行的数据。这可以是数组，对象，Javascript对象实例或tr元素。如果使用数据结构（即数组或对象），则它必须与表中的其他数据具有相同的格式（即，如果表使用对象，则在此处传入具有相同属性的对象！）。

Answer 1

如果使用columns属性指定columnDefs（或data），则可以以JSON /对象文字格式添加行或行：

columns: [
 { data: 'id' },
 { data: 'name' },
 { data: 'email' },
 { data: 'company' }
]

您还必须指定最后一列，即使它没有定位任何数据。你可以使用render()，createdCell()或defaultContent：

const actions = `
<div class="btn-group">
  <a href="{{ route('user.edit', ['id' => $user->id]) }}" class="btn btn-default btn-xs" title="Edit"><i class="fa fa-pencil"></i></a>
</div>
`;

var table = $('#user-table').DataTable({
  columns: [
    { data: 'id' },
    { data: 'name' },
    { data: 'email' },
    { data: 'company' },
    { data: null, defaultContent: actions }
  ]
  ...
})

现在您可以从上面插入数据：

var rowNode = table.row.add(data.data[0]).order([0, 'desc']).draw(false).node();

或所有行：

table.rows.add(data.data).draw()