order from recent date DataTables dd/mm/yyyy

Question

I made a table using DataTables plugin. I created a column called "Date" which contains some dates. With the button near "Date" I can order records but I have to use this format for the dates dd/mm/yyyy so the order is wrong.

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-striped" id="mydata">
  <thead>
    <tr>
      <th>ID</th>
      <th>Schedina</th>
      <th>Quota</th>
      <th>Stake</th>
      <th>Data</th>
      <th>Risultato</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>41</td>
      <td>12</td>
      <td>21</td>
      <td>12</td>
      <td value="2020-11-15">15/11/2020</td>
      <td>In corso</td>
    </tr>
    <tr>
      <td>37</td>
      <td>a</td>
      <td>4.52</td>
      <td>10</td>
      <td value="2017-04-07">07/04/2017</td>
      <td>Vinto</td>
    </tr>
    <tr>
      <td>40</td>
      <td>prova 123<br> prova</td>
      <td>2.01</td>
      <td>15</td>
      <td value="2017-01-15">15/01/2017</td>
      <td>In corso</td>
    </tr>
    <tr>
      <td>42</td>
      <td>oggi</td>
      <td>2</td>
      <td>21</td>
      <td value="2017-01-15">15/01/2017</td>
      <td>Vinto</td>
    </tr>
    <tr>
      <td>43</td>
      <td>1212dwed</td>
      <td>12</td>
      <td>12</td>
      <td value="2017-01-15">15/01/2017</td>
      <td>Perso</td>
    </tr>
    <tr>
      <td>39</td>
      <td>12</td>
      <td>12</td>
      <td>12</td>
      <td value="2017-01-14">14/01/2017</td>
      <td>Vinto</td>
    </tr>
    <tr>
      <td>38</td>
      <td>a</td>
      <td>2</td>
      <td>12</td>
      <td value="2017-01-13">13/01/2017</td>
      <td>Perso</td>
    </tr>
    <tr>
      <td>36</td>
      <td>a</td>
      <td>1.94</td>
      <td>30</td>
      <td value="2017-01-12">12/01/2017</td>
      <td>Vinto</td>
    </tr>
    <tr>
      <td>35</td>
      <td>a</td>
      <td>1.95</td>
      <td>30</td>
      <td value="2017-01-12">12/01/2017</td>
      <td>Perso</td>
    </tr>
    <tr>
      <td>34</td>
      <td>a</td>
      <td>1.93</td>
      <td>30</td>
      <td value="2017-01-12">12/01/2017</td>
      <td>Vinto</td>
    </tr>
    <tr>
      <td>33</td>
      <td>Nad</td>
      <td>1.82</td>
      <td>30</td>
      <td>12/01/2017</td>
      <td>Vinto</td>
    </tr>
  </tbody>
</table>
<script>
  $('#mydata').DataTable({
    responsive: true
  });
</script>

This is why I didn't post it. There is an error in line no 0. But in my file I don't have any error

How can I solve this problem?

Answer 1

You are comparing dates as strings, but the strings contain the day at start. Let's implement a helper function:

function helper(input) {
   var dateElements = input.split("/");
   return dateElements[2] + dateElements[1] + dateElements[0];
}

and use this to convert your elements to their desired format. Then you will be able to compare them, as year will be at the start, month will follow and day will be at the end.