custom sorting in DataTables

Question

I have an address field in my table which is showing but the sorting is by default done with numbers first, i want to ignore numbers and make sure the sorting should go with alphabets, i am checking everywhere but does not seems to work

Here is some kind of sample i am trying with integers, can anyone show some code with alphabets only

    jQuery.fn.dataTableExt.oSort['intComparer-asc'] = function (a, b) {
    var m = a.match(/^\<.*\>(\d+)\<.*\>/);
    a = m[1];
    var m = b.match(/^\<.*\>(\d+)\<.*\>/);
    b = m[1];
    var value1 = parseInt(a);
    var value2 = parseInt(b);
    return ((value1 < value2) ? -1 : ((value1 > value2) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['intComparer-desc'] = function (a, b) {
    var m = a.match(/^\<.*\>(\d+)\<.*\>/);
    a = m[1];
    var m = b.match(/^\<.*\>(\d+)\<.*\>/);
    b = m[1];
    var value1 = parseInt(a);
    var value2 = parseInt(b);
    return ((value1 < value2) ? 1 : ((value1 > value2) ? -1 : 0));
};

$(document).ready(function() {
    $('#my_datatable').each( function(){
        oTable = $(this).dataTable({
            'bPaginate': false, 
            'bInfo': false,
            'bFilter': false,
            'aoColumnDefs': [
                { 'sType': 'intComparer', 'aTargets': [ 0, 1 ] }
            ]
        });
    });
});

Tried it like this

jQuery.fn.dataTableExt.oSort['stringComparer-asc'] = function (a, b) {
                    var m = a.match(/^[a-zA-Z]+$/);
                    a = m[1];
                    var m = b.match(/^[a-zA-Z]+$/);
                    b = m[1];
                    var value1 = a;
                    var value2 = b;
                    return ((value1 < value2) ? -1 : ((value1 > value2) ? 1 : 0));
                };

                jQuery.fn.dataTableExt.oSort['stringComparer-desc'] = function (a, b) {
                    var m = a.match(/^[a-zA-Z]+$/);
                    a = m[1];
                    var m = b.match(/^[a-zA-Z]+$/);
                    b = m[1];
                    var value1 = parseInt(a);
                    var value2 = parseInt(b);
                    return ((value1 < value2) ? 1 : ((value1 > value2) ? -1 : 0));
                };

oTable = $('#table').dataTable( {
                        "bStateSave": true,
                        "bProcessing": true,
                        "iDisplayLength": 15,
                        "aoColumns": [
                            null,
                            {"sType": "stringComparer"},
                            null,
                            null,
                            null,
                            null,
                            { "bSortable": false },
                            { "bSortable": false },
                            { "bSortable": false }
                        ],
                    } );

But got an error:

TypeError: m is null


a = m[1];

Answer 1

So here is a simple solution that has custom sort to exclude out the numbers in comparisons

    <div id="table_container">
    <table id="streets">
        <thead>
            <tr>
                <th>location</th>
                <th>street</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>


    function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function getStreet(str){
    addr = str.replace(' ', ',');
    var arr = addr.split(',');

    if (arr.length > 1) 
    {
        addr = isNumber(arr[0]) ? arr[1] : arr[0];
        return addr;
    }
}

jQuery.fn.dataTableExt.oSort["street-desc"] = function (x, y) {
        return getStreet(x) < getStreet(y);
    };

    jQuery.fn.dataTableExt.oSort["street-asc"] = function (x, y) {
        return getStreet(x) > getStreet(y);
    }

    var oTable = $("#streets").dataTable({
        "aaData": [
            ["Location1", "323 Boom Town Lane"],
            ["Location2", "123 StackOverflow"],
            ["Location3", "430 IamSleepy"]
        ],
        "aoColumns": [{
            "sWidth": "30%",
            "sClass": "center",
            "bSortable": false
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": true,
            "sType": "street"
        }]

    });

You may find this example I put here on jsfiddle