DataTables row.add () на основе столбцов - PullRequest
Новая
       16

DataTables row.add () на основе столбцов

1 голос
/ 18 марта 2019

У меня есть таблица: 

<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.Если используется структура данных (т. Е. Массив или объект), она должна быть в том же формате, что и другие данные в таблице (т. Е. Если ваша таблица использует объекты, передайте объект с такими же свойствами здесь!).

1 Ответ

1 голос
/ 18 марта 2019

Если вы укажете columns (или columnDefs) с атрибутами data, вы можете добавить строку или строки в формате JSON / object: 

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()
...