jQuery Datatable не реагирует на упорядочение снизу после скрытия столбца

Question

Я использую таблицы данных, которые имеют такую ​​простую структуру:

<table id="tableListUsers" class="table table-hover dt-responsive compact" style="width:95%">
  <thead>
    <tr>
      <th>uid</th>
      <th><%= pageInfo.firstName %></th>
      <th><%= pageInfo.lastName %></th>
      <th><%= pageInfo.username %></th>
      <th><%= pageInfo.phone %></th>
      <th><%= pageInfo.address %></th>
      <th><%= pageInfo.jobDescription %></th>
      <th><%= pageInfo.active %></th>
    </tr>
  </thead>
  <tbody>
    <% users.forEach(function(user) { %>
    <tr>
      <td class="uidTable"> <%= user.uid %> </td>
      <td class="uidTable"><%= user.name %></td>
      <td class="uidTable"><%= user.lastName %></td>
      <td class="uidTable"><%= user.email %></td>
      <td class="uidTable"><%= user.phone %></td>
      <td class="uidTable"><%= user.address %></td>
      <td class="uidTable"><%= user.jobDescription %></td>
      <td class="uidTable"><%= user.active %></td>
    </tr>
    <% }) %>
  </tbody>
</table>

Я спрятал первый столбец, потому что мне нужен только uid для редактирования показанного пользователя, но мне не нужно показывать его пользователю. Поэтому я добавил эту конфигурацию в свою таблицу данных, и она, как и ожидалось, скрывает первый столбец. Но если я изменяю размер окна до размера мобильного устройства, оно на самом деле реагирует, но не приводит к изменению порядка отсутствующих столбцов в нижней части строки.

Надеюсь, вы сможете лучше понять следующие изображения:

Сначала это вся информация, показанная в моей таблице:

Но когда я изменяю размер для мобильных устройств, таблица не показывает все столбцы:

Ожидаемый результат такой:

Как вы можете видеть, столбцы отсутствуют, и их невозможно увидеть на втором изображении, это конфигурация моей таблицы данных:

table = $('#tableListUsers').DataTable( {
  rowReorder: {
      selector: 'td:nth-child(0)'
  },
  responsive: true,
  "paging":   true,
  "ordering": true,
  "info":     true,
  "language": {
    "lengthMenu": "Displaying _MENU_ records per page",
    "zeroRecords": "Nothing found - sorry",
    "info": "Showing page _PAGE_ of _PAGES_",
    "infoEmpty": "No records available",
    "infoFiltered": "(filtered from _MAX_ total records)"
  },
  // If I delete columnDefs it works as expected but I need it to hide the column 0 that I mentioned the user won't see.
  columnDefs: [
    { targets: [ 0 ],
    className: "hide_column"
    }
  ]
});

Answer 1

Похоже, вы прячете столбец с помощью класса CSS ...

Вы должны использовать видимую опцию DataTable .

$('#example').dataTable( {
  "columnDefs": [
    { "visible": false, "targets": 0 }
  ]
});