Adding checkbox element to Data Table & Form Editor

serranodns@gmail.com

Providing a method for implementing a checkbox on your data table and form editor. Hope this helps!

// Add checkbox element as a new field type for the form editor


// jQuery DataTable Plug-in code
(function ($, DataTable) {

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

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

    // create new field type 'checkBox'
    _fieldTypes.checkBox = {

        // create element
        create: function (conf) {

            // enable element
            conf._enabled = true;

            // create checkbox element
            conf._input = $(
                '<input type="checkbox">'
            );

            return conf._input;
        },

        // get field value
        get: function (conf) {
            
            // return 'checked' value
            return conf._input[0].checked;
        },

        // set field value
        set: function (conf, val) {

            // remove attribute 'checked'
            conf._input[0].removeAttribute('checked');

            // check if data is 'Is Active'
            if (conf.data == 'Is Active')
            {
                // check the value
                if (val == true) {
                    // add attribute 'checked'
                    conf._input[0].setAttribute('checked', 'checked');
                }
            }
        }
    };

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

        

// Initialize form editor field with a type value of 'checkBox'

editor = new jQuery.fn.dataTable.Editor({
    fields: [{
            label: "Is Active:",
            name: "Is Active",
            type: "checkBox",
            def: true
        }
    ]
});


// Initialize data table checkbox column, and render as a checkbox
// https://editor.datatables.net/examples/api/checkbox

table = $('#reportsTable').DataTable({
    columns: [{
            data: "Is Active",
            // render event
            render: function (data, type, row) {

                if (type === 'display') {
                    // return checkbox element and disable on the client
                    return '<input type="checkbox" class="editor-active" disabled>';
                }
                return data;
            },
            className: "dt-body-center"
        }
    ],
    rowCallback: function (row, data) {

        // Set the checked state of the checkbox in the table
        $('input.editor-active', row).prop('checked', data['Is Active'] == true);
    }
});

allan

Thanks for sharing this with us! Could you clarify what this adds over the checkbox input type?

Allan