Как отсортировать таблицу jQuery DataTables, используя отдельный столбец?

Question

Можно ли отсортировать таблицу DataTables по отдельному столбцу? В приведенном ниже примере таблица по умолчанию сортируется с использованием первого столбца, который также скрыт. Несмотря на то, что третий столбец является столбцом даты, он не имеет числового формата. При попытке отсортировать таблицу с использованием третьего столбца выполняется сортировка по алфавиту, а не по дате.

Как можно правильно отсортировать таблицу по дате с использованием третьего столбца? Можно ли отсортировать таблицу по скрытому первому столбцу при переключении третьего столбца?

$('#table').DataTable({ 
    responsive: true,
    "order": [[0, "desc"]],
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
    <thead>
        <tr>
            <th>Numerical date</th>
            <th>Description</th>
            <th>String format date</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>20200801</td>
            <td>Record 1</td>
            <td>August 1, 2020</td>
        </tr>
        <tr>
            <td>20200701</td>
            <td>Record 2</td>
            <td>July 1, 2020</td>
        </tr>
        <tr>
            <td>20200501</td>
            <td>Record 3</td>
            <td>May 1, 2020</td>
        </tr>
        <tr>
            <td>20200401</td>
            <td>Record 4</td>
            <td>April 1, 2020</td>
        </tr>
    </tbody>
</table>

Answer 1

Вы можете добавить следующее. Вы должны иметь возможность правильно сортировать по дате:

"aoColumns": [{},{},{"bSortable": true, "sType": "date"}] 

Посмотрите это в действии в демонстрации ниже:

$('#table').DataTable({ 
    responsive: true,
    "order": [[2, "desc"]],
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ],
    "aoColumns": [{},{},{"bSortable": true, "sType": "date"}]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
    <thead>
        <tr>
            <th>Numerical date</th>
            <th>Description</th>
            <th>String format date</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>20200801</td>
            <td>Record 1</td>
            <td>August 1, 2020</td>
        </tr>
        <tr>
            <td>20200701</td>
            <td>Record 2</td>
            <td>July 1, 2020</td>
        </tr>
        <tr>
            <td>20200501</td>
            <td>Record 3</td>
            <td>May 1, 2020</td>
        </tr>
        <tr>
            <td>20200401</td>
            <td>Record 4</td>
            <td>April 1, 2020</td>
        </tr>
    </tbody>
</table>

Answer 2

Вы можете дать tds атрибут сортировки данных. Тогда вам вообще не понадобится первый столбец.

$('#table').DataTable({
  responsive: true,
  "order": [
    [1, "desc"]
  ]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>Description</th>
      <th>String format date</th>
    </tr>
    <thead>
      <tbody>
        <tr>
          <td>Record 1</td>
          <td data-sort="20200801">August 1, 2020</td>
        </tr>
        <tr>
          <td>Record 2</td>
          <td data-sort="20200701">July 1, 2020</td>
        </tr>
        <tr>
          <td>Record 3</td>
          <td data-sort="20200501">May 1, 2020</td>
        </tr>
        <tr>
          <td>Record 4</td>
          <td data-sort="20200401">April 1, 2020</td>
        </tr>
      </tbody>
</table>