Editor example Custom field type plug-ins

Although Editor comes with a number of field types built in, you might find that the built in controls don't do exactly what you would like, or you want to present a completely custom control. For these eventualities Editor's field types are designed to be completely extensible and you can create plug-ins to provide your custom controls, or use some of the ones already available.

This example shows how you might create a binary switch using button elements, effectively implementing a custom radio control. This might be useful for styling, as shown in this example.

For more detailed information on how to create plug-ins for Editor, please refer to the Editor documentation.

Priority Item Status

The Javascript shown below is used to initialise the table shown in this example:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
// Todo field type plug-in code
(function ($, DataTable) {
 
if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
 
var Editor = DataTable.Editor;
var _fieldTypes = DataTable.ext.editorFields;
 
_fieldTypes.todo = {
    create: function ( conf ) {
        var that = this;
 
        conf._enabled = true;
 
        // Create the elements to use for the input
        conf._input = $(
            '<div id="'+Editor.safeId( conf.id )+'">'+
                '<button type="button" class="inputButton" value="0">To do</button>'+
                '<button type="button" class="inputButton" value="1">Done</button>'+
            '</div>');
 
        // Use the fact that we are called in the Editor instance's scope to call
        // the API method for setting the value when needed
        $('button.inputButton', conf._input).click( function () {
            if ( conf._enabled ) {
                that.set( conf.name, $(this).attr('value') );
            }
 
            return false;
        } );
 
        return conf._input;
    },
 
    get: function ( conf ) {
        return $('button.selected', conf._input).attr('value');
    },
 
    set: function ( conf, val ) {
        $('button.selected', conf._input).removeClass( 'selected' );
        $('button.inputButton[value='+val+']', conf._input).addClass('selected');
    },
 
    enable: function ( conf ) {
        conf._enabled = true;
        $(conf._input).removeClass( 'disabled' );
    },
 
    disable: function ( conf ) {
        conf._enabled = false;
        $(conf._input).addClass( 'disabled' );
    }
};
 
})(jQuery, jQuery.fn.dataTable);
 
 
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../../controllers/todo.php",
        table: "#example",
        fields: [ {
                label: "Item:",
                name: "item"
            }, {
                label: "Status:",
                name: "done",
                type: "todo", // Using the custom field type
                def: 0
            }, {
                label: "Priority:",
                name: "priority",
                type: "select",
                options: [
                    { label: "1 (highest)", value: "1" },
                    { label: "2",           value: "2" },
                    { label: "3",           value: "3" },
                    { label: "4",           value: "4" },
                    { label: "5 (lowest)",  value: "5" }
                ]
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../../controllers/todo.php",
        columns: [
            { data: "priority", className: "center" },
            { data: "item" },
            {
                className: "center",
                data: "done",
                render: function (data, type, row) {
                    if ( type === 'display' || type === 'filter' ) {
                        // Filtering and display get the rendered string
                        return data == 0 ? "To do" : "Done";
                    }
                    // Otherwise just give the original data
                    return data;
                }
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Editor submits and retrieves information by Ajax requests. The two blocks below show the data that Editor submits and receives, to and from the server. This is updated live as you interact with Editor so you can see what is submitted.

Submitted data:

The following shows the data that has been submitted to the server when a request is made to add, edit or delete data from the table.

// No data yet submitted

Server response:

The following shows the data that has been returned by the server in response to the data submitted on the left and is then acted upon.

// No data yet received

Other examples

Simple initialisation

Advanced initialisation

DataTables extensions

Dates and time

Inline editing

Bubble editing

API

Standalone

Styling

Plug-ins

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2018
DataTables is licensed under the MIT license.