Quantcast
Channel: Free community support — DataTables forums
Viewing all articles
Browse latest Browse all 35371

Custom rendering in plugins for custom data types

$
0
0

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.


Viewing all articles
Browse latest Browse all 35371

Trending Articles