Full working example: DataTables and Editor

atcclears

For the convenience of others, I've posted a full working example here. This uses DataTables 1.10.7 and Editor 1.4.2.

In this example, the table only displays the fields Date, User, and Note. The other fields are hidden. Moreover, when adding a Note the User will only be prompted to put data into the field Note (the fields Date and User are system-generated).

In the JavaScript, you'll see some <TMPL...> stuff. I'm using something called HTML Templates with Perl, and this allows me to dynamically replace that text with a string.

I use three different server-side programs to work with Editor: one to do the initial load of the table, one when adding a new row, and one when deleting a row. There is intentionally no Edit/update in this code.

I use the PreSubmit function to inject some additional variables into the JSON object. I also use PreSubmit to do a bit of data validation - in this case the Note text cannot be blank/empty.

I have four hidden fields in this table. These are used for record linkage, session/state management and security, and more.

Sorry about not getting the formatting better in this posting, but you should be able to copy/paste into your favorite tool and review the code. I hope this is useful to you. :)

First, the HTML for the table:

table id="tablenote" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" width="100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>User</th>
      <th>Note</th>
      <th>Application ID</th>
      <th>Application Note ID</th>
      <th>Session ID</th>
      <th>Language Code</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Now, the complete JavaScript for Editor:

<script type="text/javascript">
var NoteEditor;

$(document).ready(function() {

  NoteEditor = new $.fn.dataTable.Editor( {
    ajax: {
      create: {
        url: "/perl/applnotecreate.pl",
        type: "POST",
        dataType: "json"
      },
      remove: {
        url: "/perl/applnoteremove.pl",
        type: "POST",
        dataType: "json"
      }
    },
    table: "#tablenote",
    fields: [
      { label: "Date:", name: "updated_gmt_ts", type: "hidden" },
      { label: "User:", name: "created_user", type: "hidden" },
      { label: "Note:", name: "note_txt", type: "textarea", attr: { maxlength: 3900, placeholder: "required"} },
      { label: "Application ID:", name: "application_id", type: "hidden" },
      { label: "Application Note ID:", name: "application_note_id", type: "hidden" },
      { label: "Session ID:", name: "session_id", type: "hidden" },
      { label: "Language Code:", name: "language_cd", type: "hidden" }
    ]
  } );

  NoteEditor.on( "preSubmit", function ( e, o, action ) {
    o.data.session_id = "<TMPL_VAR NAME=APACHE_SESSION_ID>";
    o.data.language_cd = "<TMPL_VAR NAME=LANG_CD>";
    o.data.application_id = "<TMPL_VAR NAME=APPLICATION_ID>";
    if ( action !== "remove" ) {
      if ( o.data.note_txt === "" )
      {
    this.error( "note_txt", "Note cannot be blank." );
    return false;
      }
    }
  } );

  $("#tablenote").DataTable( {
    dom: "T<'clear'>rtip",
    ajax: {
      url: "/perl/applnoteload.pl?session_id=<TMPL_VAR NAME=APACHE_SESSION_ID>&language_cd=<TMPL_VAR NAME=LANG_CD>&application_id=<TMPL_VAR NAME=APPLICATION_ID>",
      type: "GET",
      dataType: "json"
    },
    columns: [
      { "data": "updated_gmt_ts" },
      { "data": "created_user" },
      { "data": "note_txt" },
      { "data": "application_id" },
      { "data": "application_note_id" },
      { "data": "session_id" },
      { "data": "language_cd" }
    ],
    columnDefs: [
      { "targets": [0], "width": "15%" },
      { "targets": [1], "width": "20%" },
      { "targets": [3], "visible": false, "searchable": false },
      { "targets": [4], "visible": false, "searchable": false },
      { "targets": [5], "visible": false, "searchable": false },
      { "targets": [6], "visible": false, "searchable": false }
    ],
    order: [[0,"desc"]],
    lengthMenu: [<TMPL_VAR NAME=ROWS_PER_PAGE>],
    lengthChange: false,
    tableTools: {
      sRowSelect: "single"
<TMPL_IF NAME=ROLE_CHANGEAPPL>
     , aButtons: [
        { sExtends: "editor_create", editor: NoteEditor },
        { sExtends: "editor_remove", editor: NoteEditor }
      ]
</TMPL_IF>
    }
  } );

} );
</script>

allan

Brilliant - thanks for sharing this with us!

Allan

monkeyboy

Any chance of a full file which includes all tags, includes, etc?
I am brand new to this, and have a task to build an editor page for multiple joined tables. An executable/web servable example would be a great springboard for newbies.

allan

There is a join example for Editor available in the online examples here.

Allan