Question

I have the following hyperlink grid-view column that needs to be sorted numerically by IncidentId. Is there a way to keep the data as a hyperlink and only sort by the IncidentId? When I use the following javascript function to sort it “numerical” it breaks and the column will not sort. If I declare sType as “string” or “html” it sorts, but it alphabetizes the data rather than a numerical sort, in other words, it will list it as 93, 82, 71, 40, 123, 122, 121 rather than 123, 122, 121, 93, 82, 71, 40.

<asp:HyperLinkField HeaderText="Incident ID:" DataNavigateUrlFields="IncidentId" 
DataNavigateUrlFormatString="view.aspx?id={0}" DataTextField="IncidentId"/>


<script type="text/javascript">
    $(function () {
        $('#GridViewIncidents').dataTable({
            "bFilter": false,
            "bSort": true,
            "aoColumnDefs": [{ "sType": "numerical", "aTargets": [0]}]
        });
    });
</script>

Answer 1

You need to override the default comparers for the datatables sort function.

jQuery.fn.dataTableExt.aTypes.unshift(
    function (sData) {
        if (sData !== null && sData.match('^<.*[0-9]+</.*>$')) {
            return 'intComparer';
        }
        return null;
    }
);

the above code will find any integer wrapped in an html tag and tell Datatables to use a custom comparer function.

We then need to define the compaere functions for this:

    jQuery.fn.dataTableExt.oSort['intComparer-asc'] = function (a, b) {
        var value1 = parseInt(getInnerHTML(a));
        var value2 = parseInt(getInnerHTML(b));
        return ((value1 < value2) ? -1 : ((value1 > value2) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['intComparer-desc'] = function (a, b) {
        var value1 = parseInt(getInnerHTML(a));
        var value2 = parseInt(getInnerHTML(b));
        return ((value1 < value2) ? 1 : ((value1 > value2) ? -1 : 0));
    };

This strips the tags out and sorts by numeric value.

Just put all this code in a script tag before you set up your table and it should work!