Increment/Decrement tool using Bootstrap and Fontawesome - Updated

ideaxme

Updated version of Greg Brainerd's increment/decrement number input plugin: https://datatables.net/forums/discussion/40706

// incrementor field type plug-in code
(function ($, DataTable) {

    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }

    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;

    _fieldTypes.incrementor = {
        create: function ( conf ) {
            var that = this;

            conf._enabled = true;

            conf._input = $(
            '<div class="input-group"><span>' +

            '<button type="button" class="btn alter decrement" style="float:left;margin-right:10;background:red;color:white;"><i class="fa fa-minus fa-lg"></i></button>' +

            '<input id="' + Editor.safeId(conf.id) + '" type="text" class="incrementor" style="text-align:center;float:left;width:100px">' +

            '<button type="button" class="btn alter increment" style="float:left;background:green;color:white;"><i class="fa fa-plus fa-lg"></i></button>' +

            '</span></div>'
            );

            // Use the fact that we are called in the scope of the Editor instance to call
            // the API method for setting the value when needed
            $('button.alter', conf._input).click( function () {

                if ( conf._enabled ) {
                    var number = $("input.incrementor", conf._input).val();

                    if ($(this).hasClass('increment')) {
                    number = parseInt(number) + 1;
                    $("input.incrementor", conf._input).val(number);
                    }
                    else if (number >= 1) {
                        number = parseInt(number) - 1;
                        $("input.incrementor", conf._input).val(number);
                    }
                    that.set( conf.name, $("input.incrementor", conf._input).val() );
                }

                return false;
            } );

            return conf._input;
        },

        get: function ( conf ) {
            return $("input.incrementor", conf._input).val();
        },

        set: function ( conf, val ) {
            var number = parseInt(val);

            $("input.incrementor", conf._input).val(number);
        },

        enable: function ( conf ) {
            conf._enabled = true;
            $(conf._input).removeClass( 'disabled' );
        },

        disable: function ( conf ) {
            conf._enabled = false;
            $(conf._input).addClass( 'disabled' );
        }
    };

    })(jQuery, jQuery.fn.dataTable);

ideaxme

Thanks @Greg Brainerd

colin

Nice, thanks for posting that, and here it is in action: http://live.datatables.net/pajeledu/1/edit

Colin

allan

Very nice! Can we include that in the list of Editor plug-ins please?

Thanks,
Allan

ideaxme

Yes, of course.

allan

Awesome - thanks! That is it committed and we'll push it out with the next site update.

Regards,
Allan

allan

If anyone is interested, here is the example with FontAwesome included and a little bit of styling: http://live.datatables.net/pajeledu/2/edit .

Allan