How to sort a jQuery DataTables table using a separate column?

Question

Is it possible to sort a DataTables table using a separate column? In the example below, the table is sorted using the first column by default, which is also hidden. Even though the third column is a date column, it is not in a numerical format. When trying to sort the table using the third column, it is sorting alphabetically rather than by date.

How can the table be sorted by date correctly using the third column? Is it possible to sort the table using the hidden first column when toggling the third column?

$('#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>

You can use the orderData feature - you can see an example here. The example is for a slightly different situation - but the solution applies to your case also. — andrewJames
– andrewJames, Commented Aug 4, 2020 at 21:53
Otherwise the Moment.js plugin for DataTables may be able to address your date sorting requirement directly. An SO example is here. — andrewJames
– andrewJames, Commented Aug 4, 2020 at 21:56

Alex Ross · Accepted Answer · 2020-08-05 18:44:01Z

You can give tds a data-sort attribute. Then you wouldn't need the first column at all.

$('#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>

PeterKA · Accepted Answer · 2020-08-05 00:51:13Z

You can add the following. You should be able to sort by date correctly:

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

See it in action in the demo below:

$('#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>

Collectives™ on Stack Overflow

How to sort a jQuery DataTables table using a separate column?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related