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>john@doe.com</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": "jane@doe.com",
      "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()

基于列的数据表row.add（）

1 个答案: