Custom display controller

Editor has two display controllers built in for use with the display option (lightbox and envelope). However, you might wish to customise how Editor displays your form - this can be down through the use of a display controller plug-in.

Display controllers basically place the form on screen somewhere - they are interested in the contents of the form, they are simply given an element that needs to be shown, and how exactly they display that element is entirely up to them! This provides a huge amount of flexibility in Editor, allowing your interface to be customised to exactly what you want.

This example shows how a display controller can be built using DataTables child row abilities (row().child().show()). When the control icon is clicked upon, we make a call to edit() to start the edit. The display controller then creates the child row using the DataTables API and inserts the form control.

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

Name Position Office Salary
Name Position Office Salary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script
  • Comments

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

var editor; // use a global for the submit and return data rendering in the examples (function () { var Editor = $.fn.dataTable.Editor; Editor.display.details = $.extend( true, {}, Editor.models.displayController, { "init": function ( editor ) { // No initialisation needed - we will be using DataTables' API to display items return Editor.display.details; }, "open": function ( editor, append, callback ) { var table = $(editor.s.table).DataTable(); var row = editor.s.modifier; // Close any rows which are already open Editor.display.details.close( editor ); // Open the child row on the DataTable table .row( row ) .child( append ) .show(); $( table.row( row ).node() ).addClass( 'shown' ); if ( callback ) { callback(); } }, "close": function ( editor, callback ) { var table = $(editor.s.table).DataTable(); table.rows().every( function () { if ( this.child.isShown() ) { this.child.hide(); $( this.node() ).removeClass( 'shown' ); } } ); if ( callback ) { callback(); } } } ); } )(); $(document).ready(function() { editor = new $.fn.dataTable.Editor( { ajax: "../php/staff.php", table: "#example", display: "details", fields: [ { label: "First name:", name: "first_name" }, { label: "Last name:", name: "last_name" }, { label: "Position:", name: "position" }, { label: "Office:", name: "office" }, { label: "Extension:", name: "extn" }, { label: "Start date:", name: "start_date", type: "datetime" }, { label: "Salary:", name: "salary" } ] } ); var table = $('#example').DataTable( { dom: "Bfrtip", ajax: "../php/staff.php", columns: [ { className: 'details-control', orderable: false, data: null, defaultContent: '' }, { data: null, render: function ( data, type, row ) { // Combine the first and last names into a single table field return data.first_name+' '+data.last_name; } }, { data: "position" }, { data: "office" }, { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) } ], "order": [[1, 'asc']], select: true, buttons: [ { extend: "create", editor: editor } ] } ); $('#example').on( 'click', 'td.details-control', function () { var tr = this.parentNode; if ( table.row( tr ).child.isShown() ) { editor.close(); } else { editor.edit( tr, 'Edit row', [ { "className": "delete", "label": "Delete row", "fn": function () { // Close the edit display and delete the row immediately editor.close(); editor.remove( tr, '', null, false ); editor.submit(); } }, { "label": "Update row", "fn": function () { editor.submit(); } } ] ); } } ); } );

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

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

td.details-control { background: url('../../../../../examples/resources/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../../../../../examples/resources/details_close.png') no-repeat center center; } td.DTE_EditorDetails:hover { background-color: white !important; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Other examples