Question

I have the following code:

     $.extend($.fn.dataTableExt.oSort, {
        "datetime-uk-pre": function (a) {
            from = a.split(' ');
            var ukDatea = from[0].split('/');
            var ukTimea = from[1].split(':');
            return (ukDatea[2] + ukDatea[1] + ukDatea[0] + ukTimea[1] + ukTimea[0]) * 1;
        },
        "datetime-uk-asc": function (a, b) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
        "datetime-uk-desc": function (a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

    $.extend($.fn.dataTableExt.oSort, {
        "date-uk-pre": function (a) {
            var ukDatea = a.split('/');

            return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
        },
        "date-uk-asc": function (a, b) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
        "date-uk-desc": function (a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

I read about about extend but still don’t understand what it is doing. Can someone help explain this. What I am looking for is a simple explanation as possible. Also can I combine these two code blocks in some way.

This is code to give datatables a different way to sort. But what does it mean:

$.fn.dataTableExt.oSort

Answer 1

DataTables provides several sorting options in the base package. The one you are looking at is called Type based column sorting, which basically will try to sort your column based on its type. DataTables already provisions default sorting functions for the most common types, such as Date, Numeric, and HTML. These are registered as properties in an object called oSort, which is accessible using $.fn.dataTableExt.oSort. This object looks like this:

oSort = {
  "string-pre": function ( a ) {
    // ...
  },
  "numeric": function ( a ) {
    // ...
  }
}

However, if you need a custom sorting function for a custom type, you can extend the oSort object, by adding additional keys, or properties, to the oSort object.

For example, to add a new type, called date-uk-pre, you could use:

$.fn.dataTableExt.oSort['date-uk-pre'] = function ( a ) {
  // ...
}

That is, you are extending the oSort with a new property called date-uk-pre. jQuery’s $.extend() is nothing but a shortcut for this. Instead of adding manually each property, for each new type, you pass a new object, with all your new types (e.g., date-uk-pre, datetime-uk-pre, and jQuery merges them with the existing oSort object, effectively extending it with the new functions. You can even combine both $.extend()s to a single one:

$.extend($.fn.dataTableExt.oSort, {
    "date-uk-pre": function (a) {
        var ukDatea = a.split('/');

        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },
    "date-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "date-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    },
    "datetime-uk-pre": function (a) {
        from = a.split(' ');
        var ukDatea = from[0].split('/');
        var ukTimea = from[1].split(':');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0] + ukTimea[1] + ukTimea[0]) * 1;
    },
    "datetime-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "datetime-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});