Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rendering a Datatables column to ignore letter and sort by number

I'm having trouble using jQuery Datatables to sort data.

I have a table that has many columns. The column I want to sort is Document Number. Some document numbers have an A at the start and some don't. I am trying to sort these in descending order without regard to that letter A.

Currently the data looks like this:

A83052
A83030
A83019
A08565
A08554
A08542
A08455
 08500
 08365
 08345
 00098

But I want it sorted as follows:

A83052
A83030
A83019
A08565
A08554
A08542
 08500
A08455
 08365
 08345
 00098

I do have to leave the A there, however, since it is part of the Document number.

Here is my code:

j$("table[id$=policyBlock]").DataTable({
    "order": [[0, 'desc']],
    "bFilter": false,
    "bPaginate": false,
    "bInfo": false
});

What I tried to do is add the following after the "bInfo" field:

 "columnDefs": [ {
     "targets": 0,
     "render": function( data, type, row ) {
         return type=="sort" ? data.replace(/\D/g,'') : data;
      }
  }]

The list then ordered itself as so:

 00098
 08365
 08500
A83019
A08565
A83030
A08554
A83052
A08455
 08345
A08542

What am I doing wrong?

like image 892
David Tarvin Avatar asked Dec 08 '25 06:12

David Tarvin


1 Answers

You can set data-order attribute for table cell and Datatable will order by this attribute. Your table cell should look like:

<td data-order="08542">A08542</td>

Read more: https://datatables.net/examples/advanced_init/html5-data-attributes.html

$('#dataTable').DataTable({
    "order": [[0, "desc"]], 
    "bFilter": false,
    "bPaginate": false,
    "bInfo": false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="dataTable">
    <thead>
        <tr>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-order="83052">A83052</td>
        </tr>
        <tr>
            <td data-order="83030">A83030</td>
        </tr>
        <tr>
            <td data-order="83019">A83019</td>>
        </tr>
        <tr>
            <td data-order="08565">A08565</td>>
        </tr>
        <tr>
            <td data-order="08554">A08554</td>>
        </tr>
        <tr>
            <td data-order="08542">A08542</td>>
        </tr>
        <tr>
            <td data-order="08455">A08455</td>>
        </tr>
        <tr>
            <td data-order="08500">08500</td>>
        </tr>
        <tr>
            <td data-order="08365">08365</td>>
        </tr>
        <tr>
            <td data-order="08345">08345</td>>
        </tr>
        <tr>
            <td data-order="00098">00098</td>>
        </tr>
    </tbody>
</table>
like image 50
Andriy Lozynskiy Avatar answered Dec 10 '25 11:12

Andriy Lozynskiy



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!