Why does ordering a table by a column containing links fail?

Ajax30

I use DataTables to paginate and order a table containing user data.

The first column contains links instead of plain text. It seems that for this reason, the ascending/descending ordering is wrong (random).

It seems that the presence of diacritics on the Name column is also part of the ordering issue.

  <h2>Data Tables</h2>
  <table id="employees" class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#">Tiger Nixon</a></td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
        </tr>
        <tr>
            <td><a href="#">Garrett Winters</a></td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
        </tr>
        <tr>
            <td><a href="#">Ashton Cox</a></td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
        </tr>
        <tr>
            <td><a href="#">Cedric Kelly</a></td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
        </tr>
        <tr>
            <td><a href="#">Ștefan Popa</a></td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
        </tr>
        <tr>
            <td><a href="#">Brielle Williamson</a></td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012-12-02</td>
        </tr>
        <tr>
            <td><a href="#">Herrod Chandler</a></td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012-08-06</td>
        </tr>
        <tr>
            <td><a href="#">Rhona Davidson</a></td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010-10-14</td>
        </tr>
        <tr>
            <td><a href="#">Colleen Hurst</a></td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009-09-15</td>
        </tr>
        <tr>
            <td><a href="#">Sonya Frost</a></td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008-12-13</td>
        </tr>
    </tbody>
</table>

new DataTable('#employees', {
    info: false,
    filter: false,
    paging: true,
    "aLengthMenu": [5, 10, 25, 50, 100],
    initComplete: function() {
        if (this.api().page.info().pages < 2) {
            $('.dt-paging').hide();
        }
    }
});

1. What is my mistake?
2. What is the easiest, most reliable fix for this issue?

kthorngren

I copied your table into this running test case:
https://live.datatables.net/fufilifi/1/edit

Sorting seems to work correctly. Datatables is detecting the column type as html which means it will remove the HTML tags for sorting and filtering. See the columns.type docs for more information.

Its possible that your specific data structure isn't being type detected properly so the result is the type is set to a string. In this case you can use Orthogonal data to define the value used for sorting.

If you still need help then please provide a test case showing the issue. Update my test case if you like.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin