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];

Welcome to Stack Overflow! Please don't just ask us to solve the problem for you. Show us how you tried to solve the problem yourself, then show us exactly what the result was and tell us why you feel it didn't work. See "What Have You Tried?" for an excellent article that you really need to read. — starsplusplus
– starsplusplus, Commented Jun 16, 2014 at 17:03

Dmitry Savy · Accepted Answer · 2014-06-16 17:32:01Z

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

Collectives™ on Stack Overflow

custom sorting in DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related