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.
The Javascript shown below is used to initialise the table shown in this example:
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 scope of the Editor instance 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.
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 submittedThe 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