I'm implementing Sorting using jQuery Datatables. In second column we have mixed datatype (text/string, amount with currency symbol). The second column does not sort properly although numbers sort but cells with text/string do not change position. I want to move text to last when sorting is active for the second column. In simple words, the cells with number should be higher in hierarchy /priority while sorting.
The table and sorting can be checked below by clicking on "Run Snippet"
Thank you!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>jQuery(document).ready( function () {jQuery("#postsummary").DataTable({paging: false, "searching": false, columnDefs: [ { type: "num-fmt", targets : 1 } ], });} );</script>
<table
id="postsummary"
class="dataTable no-footer"
aria-describedby="postsummary_info"
>
<thead>
<tr>
<th
class="sorting"
tabindex="0"
aria-controls="postsummary"
rowspan="1"
colspan="1"
aria-label="Name of Program: activate to sort column ascending"
style="width: 573.075px"
>
Name of Program
</th>
<th
class="sorting sorting_asc"
tabindex="0"
aria-controls="postsummary"
rowspan="1"
colspan="1"
aria-label="Amount: activate to sort column descending"
style="width: 95.9125px"
aria-sort="ascending"
>
Amount
</th>
<th
class="sorting"
tabindex="0"
aria-controls="postsummary"
rowspan="1"
colspan="1"
aria-label="Type: activate to sort column ascending"
style="width: 100.863px"
>
Type
</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="">
Testing 1
</td>
<td class="sorting_1">varying</td>
<td class="">Compensation</td>
</tr>
<tr class="even">
<td class="">
Testing 2
</td>
<td class="sorting_1">$50,000</td>
<td class="">Grant</td>
</tr>
<tr class="odd">
<td class="">
Testing 3
</td>
<td class="sorting_1">$500,000</td>
<td class="">Grant</td>
</tr>
<tr class="even">
<td class="">
Testing 4
</td>
<td class="sorting_1">varying</td>
<td class="">Grant</td>
</tr>
<tr class="odd">
<td class="">
Testing 5
</td>
<td class="sorting_1">varying</td>
<td class="">Grant</td>
</tr>
<tr class="even">
<td class="">
Testing 6
</td>
<td class="sorting_1">$3,500</td>
<td class="">Grant</td>
</tr>
</tbody>
</table>