Custom rendering in plugins for custom data types

WIR3D

So I created a plugin (basically one of your modified plugins) for duration (00:00:00 & 00:00)

And since It's a kak idea to manipulate data server side for display purposes, and that have 00:00:03 is bad ux, it makes sense to render the data differently in the user side.

Now I could quite easily get all the cells of the duration datatype and manipulate them after render, but that is quite nasty, ideally the plugin should encapsulate the rendering.

this is where I'm at, which is not ideal because it requires the user to specify the rendering manually, but at least its still encapsulated in the plugin:

Plugin:

/**
 * This plug-in will add automatic detection for time columns to
 * DataTables.
 *
 * The following duration formats are supported:
 * <ul>
 *  <li>10:10</li>
 *  <li>10:10:10</li>
 *  <li>123:10:10</li>
 *  <li>1234:10:10</li>
 * </ul>
 *
 *
 *  @name Duration
 *  @summary detect timed time format
 *  @author Rijnhard Hessel
 */

(function(){
var typeName = 'duration';

    /*
     * supports:
     * 10:10
     * 10:10:10
     * 123:10:10
     * 1234:10:10
     */
var durationRegex = '^(([0-9]{2,4}):)?([0-9]{2}):([0-9]{2})$';

// Init the regex just once for speed
var regex = new RegExp(durationRegex);

jQuery.fn.dataTableExt.aTypes.unshift(
    function (data) {
        if (typeof data === 'string' && regex.test(data) ) {
            return typeName;
        }

        return null;
    }
);

jQuery.fn.dataTable.render[typeName] = function() {
    var prefix = '00:';

    return {
        display: function ( d ) {
            //80% faster then regex
            if (8 === d.length && d.substr(0, 3) === prefix) {
                console.debug('render duration modify:', d);
                return d.slice(3);
            }
            //console.debug('render duration:', d);
            return d;
        }
    };
};

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "duration-pre": function ( a ) {
        var matches = regex.exec(a);
        var total = 0;
        var hours = parseInt(matches[2], 10);

        if (!isNaN(hours)) { //hours
            total += hours * 60 * 60;
        }
        // minutes + sec
        total += (parseInt(matches[3]) * 60) + parseInt(matches[4]);

        return total;
    },

    "duration-asc": function ( a, b ) {
        return a - b;
    },

    "duration-desc": function ( a, b ) {
        return b - a;
    }
});

}());

User init

var dt = $('#peanutsAndJelly').DataTable({
   columnDefs: [{
        targets: 'timed', //class for target
        type: 'duration',
        render: $.fn.dataTable.render.duration()
    }]
});

So basically is there another way where I can specify the default renderer for a datatype?
Googlefu and digging in the DataTables source only got me this far.

allan

Nice one - thanks for sharing this with us.

Currently no - there isn't a way of specifying a rendering for a specify type, although that is something I would like to add in a future version of DataTables. At the moment you need to specify it using columns.render as you have done.

Allan

WIR3D

Thanks,

Thinking of adding it to the plugins repo.
(after some cleanup)

I think a default custom renderer for custom types can be very useful, this is one example, another would be a different way to do currencies.

say now the core value is in USD, then with a flick of a switch and a redraw the renderer could use the same amount, and it would stay the same in the tables data (as USD) but could display is GBP, EUR etc with the appropriate symbol and conversion.

Very very powerful.

allan

Agreed! That was the idea with the built in $.fn.dataTable.render.number type which provides the ability to easily configure a render for complex number types, including currencies.

Allan