CODEWITHSUNDEEP
javascriptjquerydatatables
crayden
crayden

Reputation: 2280

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

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>

Upvotes: 2

Views: 1702

Answers (2)

Alex Ross
Alex Ross

Reputation: 189

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>

Upvotes: 3

PeterKA
PeterKA

Reputation: 24648

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>

Upvotes: 1

Related Questions