Increment/Decrement tool using Bootstrap and Fontawesome

Greg Brainerd

I was looking for an increment/decrement tool that I could use within Datatables. I couldn't find anything that I liked so I put together this plug-in for the editor. This would also work for anyone that wants to use the Bootstrap input groups on their text fields.

You will need to have both Bootstrap and Font Awesome included in your project for this to work.

I've attached a screenshot of how it looks.

Here is the javascript

 //plugin increment and decrement numbers in the field.
    (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 >' +
                    '<div class="input-group">' +
                    '<span class="input-group-btn">' + 
                    '<button type="button" class="btn btn-danger alter decrement"><i class="fa fa-minus fa-fw"></i></button>' +
                    '</span>' +
                    '<input id="' + Editor.safeId(conf.id) + '" type="text" class="incrementor" style="text-align:center;">' +
                    '<span class="input-group-btn">' +
                    '<button type="button" class="btn btn-success alter increment"><i class="fa fa-plus fa-fw"></i></button>' +
                    '</span>' +
                    '</div>' +
                    '</div>'
                    );

                return conf._input;
            },

            get: function (conf) {
                return conf._input.val();
            },

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

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

                $('.alter', conf._input).click(function () {
                    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);
                    }
                });
            },
        };
    })(jQuery, jQuery.fn.dataTable);

Within the Editor field's

    $(document).ready(function () {
        Editor = new $.fn.dataTable.Editor({
            ajax: "/folder/mylink?str=@json",
            fields: [
                {
                    type: "incrementor",
                    label: "Field Title:",
                    name: "incrementingField",
                    default: '2',
                },
            ]
        });


        $('#changeLicenses').on('click', function () {
            Editor
                .buttons({
                    label: "Update",
                    className: 'btn btn-primary',
                    fn: function () { this.submit(); }
                })
                .title("Custom Title")
                .edit(ID);
        });
    });

Here is the CSS

.input-group { max-width: 281px; } 

Greg Brainerd

Here is the screen shot

allan

Looks superb - thanks for sharing that with us!

Allan