Datatables - how to ignore HTML tags for sorting?

I need assistance sorting the first column. I have a column with a mix of alpha numeric values. I am ignoring the alpha values and only sorting by numeric values. However if a column has line breaks or

tags, it messes up the sorting. Please see the code here.

http://live.datatables.net/gezazaza/1/edit

In my table, for example, AA-EC-2019-82 AA-EC-2019-81 AA-EC-2019-71 should come after "AA-EC-2019-58" if sorted ascending. How can I achieve this? Thanks.

$(document).ready(function() {
   $('#example_full').DataTable({ 
  lengthMenu: 
      [[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50, "All"]],
 responsive: true,
  paging: true,
  searching: true,
  lengthChange: true,
  bInfo: true,
  bSort: true,
  
  columnDefs: [
    {
      targets: 0,
      render: function (data, type, row) {
        if (type === 'sort' || type === 'type') {
          var text = $(data).text();
          var parsedData = text.split('-');
          var n = '000' + parsedData[3];
          var lastNum = parsedData[2] + '0' + n.slice(-3);
          console.log(lastNum);
          return lastNum;
        }
        return data;
      }
    }
  ]
 
 });
});

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>


<table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th data-orderable="false">2</th>
<th data-orderable="false" >3</th>
<th data-orderable="false" >4</th>
</tr>

</thead><tbody>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-43</p></td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-82</br>
  AA-EC-2019-81<br>
  AA-EC-2019-71</p></td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
  
  


</tbody></table>

Solution

You can do it by adding order: [[ 0, 'asc' ]] to you dateable params :

$(document).ready(function() {
    $('#example_full').DataTable({ 
      lengthMenu:[[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50,"All"]],
      responsive: true,
      paging: true,
      searching: true,
      lengthChange: true,
      bInfo: true,
      order: [[ 0, 'asc' ]]
    });
});

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>


<table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th data-orderable="false">2</th>
<th data-orderable="false" >3</th>
<th data-orderable="false" >4</th>
</tr>

</thead><tbody>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-43</p></td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-82</br>
  AA-EC-2019-81<br>
  AA-EC-2019-71</p></td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>

  
  


</tbody></table>