Sorting column with anchor tags in jQuery DataTables

I used the jQuery datatable plugin in sort the table data. The sorting works fine if a column contains simple text. If I put any anchor tag condition on a text then the column sorting does not sort properly.

I displayed the values in following manner:

<td><?php if ($allAptArr[$d][27]['staffinactive'] == 1) { ?>
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
    <?php } else { ?>
        <a href='#' onClick="redirectToStaff('<?=$allAptArr[$d][10]['staff_id']?>');">
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
        </a>
<?php } ?> </td>

with this code the column 开发者_Go百科sorting fails.

---

add this before the ready function:

    //sets up numeric sorting of links
    jQuery.fn.dataTableExt.oSort['num-html-asc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(y) ) ? -1 : ((x > y || isNaN(x)) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(x)) ? 1 : ((x > y || isNaN(y) ) ? -1 : 0));
    };

and at the ready function:

        "aoColumns": [
          { "sType": "num-html" },
          null,
          etc. etc.
        ]

This is how it works for me with anchors, integers are getting ordered as they should.

---

Set column type to 'html':

$('#example').dataTable( {
    "aoColumns": [ 
        { "sType": "html" },
        null,
        null,
        null,
        null
    ]
} );

This will strip HTML tags before sorting.

See documentation for sType parameter

---

I just had an issue with sorting using datatables when links were involved - I had a column that had links in some cells, and no links in others. It seemed to be sorting, but it was sorting all links and then all non links, as oppose to sorting both links and non links together. The issue turned out to be spacing in the markup. When I took away all non essential spacing around any a tags, my columns sorted perfectly.

---

This is quite late for the answer, still it will helpful for other readers, You can take a dummy column. Also hide that dummy column and sort actual column by dummy column. Suppose I have three columns then add fourth coulmn as dummy and put this in datatable call

$('#example').dataTable({ "aoColumns": [null, null, {"iDataSort":3 }, { "bVisible": false}]);

---

I used the DataTables HTML5 data attributes to get the desired function of a sortable date that is wrapped in an anchor tag.

Here is an HTML snippet for one of many table cells:

<td data-order="20180115"><a href="#">01/15/2018</a></td>

---

I think its because your are mixing not anchor with anchor data in the same column. You also shouldn't use onClick, aspecialy with jquery, just setup a click() function with the right selector.

---

As the guys said, not all content you put in the tds is sortable. Links for example need to be specifically disabled. The code snippet below will disable sorting for the first column in the table.

<script type="text/javascript">
$(document).ready(function ()
{
    $('#example').dataTable({
            "aoColumnDefs":[{"bSortable": false, "aTargets": [0]}]});
});
</script>

---

My datatable had 2 columns and first column had <a> element and I was trying to sort my first column but sort was not working. I tried many ways but didnot work so I added a hidden column with @Html.Raw which binded to same model property that I bind to <a> and sorted on my hidden column. Please see below link

Jquery/JavaScript : Sort a datatable on column that has <a>