DataTables row.add() 基于列

Question

我有一个 table:

<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."
    }
]
}

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

显然，目的是为了打乱数据。在有 15 列的 table 中，我不必担心列的正确排列。

我找到了这个 https://datatables.net/reference/api/row.add() 示例 #1，但显然文档说：

Data to use for the new row. This may be an array, object, Javascript object instance or a tr element. If a data structure is used (i.e. array or object) it must be in the same format as the other data in the table (i.e. if your table uses objects, pass in an object with the same properties here!).

Answer 1

如果您使用 data 属性指定 columns（或 columnDefs），您可以添加 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()

DataTables row.add() 基于列

DataTables row.add() based on columns

datatables

datatables-1.10