Initial commit

actions/approve.php

@@ -0,0 +1,170 @@
+<?php
+
+/**
+ * This example shows making an SMTP connection with authentication.
+ */
+
+//Import the PHPMailer class into the global namespace
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+use PHPMailer\PHPMailer\SMTP;
+
+require '../phpmailer/src/Exception.php';
+require '../phpmailer/src/PHPMailer.php';
+require '../phpmailer/src/SMTP.php';
+
+//SMTP needs accurate times, and the PHP time zone MUST be set
+//This should be done in your php.ini, but this is how to do it if you don't have access to that
+date_default_timezone_set('Etc/UTC');
+
+//require '../vendor/autoload.php';
+
+//Create a new PHPMailer instance
+$mail = new PHPMailer();
+//Tell PHPMailer to use SMTP
+$mail->isSMTP();
+//Enable SMTP debugging
+//SMTP::DEBUG_OFF = off (for production use)
+//SMTP::DEBUG_CLIENT = client messages
+//SMTP::DEBUG_SERVER = client and server messages
+$mail->SMTPDebug = SMTP::DEBUG_OFF;
+//Set the hostname of the mail server
+$mail->Host = 'smtp-mail.outlook.com';
+//Set the SMTP port number - likely to be 25, 465 or 587
+$mail->Port = 587;
+//Whether to use SMTP authentication
+$mail->SMTPAuth = true;
+//Username to use for SMTP authentication
+$mail->Username = 'edms@premiummegastructures.com';
+//Password to use for SMTP authentication
+$mail->Password = 'oB4n4n4357';
+//Set who the message is to be sent from
+$mail->setFrom('edms@premiummegastructures.com', 'Vault Management');
+//Set an alternative reply-to address
+$mail->addReplyTo('edms@premiummegastructures.com', 'Vault Management');
+//Set who the message is to be sent to
+include '../config.php';
+
+$id = $_GET['id'];
+$doc_id = $_GET['doc_id'];
+$user_id = $_GET['user_id'];
+$role=$_GET['role'];
+$rtype =$_GET['type'];
+
+$sql = "SELECT status,type FROM request WHERE id=$id";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$currentStatus = $row['status'];
+$reqtype = $rtype;
+$newStatus = 0; // Set the default new status
+
+// Determine the new status based on the current status
+if ($reqtype == 0 | $reqtype == 1) {
+    if ($currentStatus == 1) {
+        $newStatus = 2; // First level of approval
+    } elseif ($currentStatus == 2) {
+        $newStatus = 6; // Second level of approval
+    } elseif ($currentStatus == 6) {
+        $newStatus = 7; // Third level of approval
+    }
+} elseif ($reqtype == 2 ) {
+    if ($currentStatus == 1) {
+        $newStatus = 2; // First level of approval
+    } elseif ($currentStatus == 2) {
+        $newStatus = 6; // Second level of approval
+    } elseif ($currentStatus == 6) {
+        $newStatus = 7; // Third level of approval
+    } elseif ($currentStatus == 7) {
+        $newStatus = 8; // Fourth level of approval for Original Copy request
+    }
+}
+// Update the status based on the new status value
+$sql = "UPDATE request SET status=$newStatus WHERE id=$id";
+$result = $conn->query($sql);
+// $sql = "UPDATE request SET status=2 WHERE id=$id";
+// $result = $conn->query($sql);
+if($result){
+     echo $reqtype.' / '.$currentStatus.' / '.$newStatus.' / '.$arole2 ;
+}
+
+$app = $_GET['app'];
+
+switch ($app){
+    case '1' : 
+    $sql = "SELECT * FROM vault_users WHERE role=$arole2";
+    $result = $conn->query($sql);
+    while ($row = $result->fetch_assoc()) {
+        $user_mail = $row['email'];
+        $user_name = $row['name'];
+        $mail->addAddress($user_mail, $user_name);
+    }
+    break;
+    case '2': 
+        $sql = "SELECT * FROM vault_users WHERE role=$arole3";
+        $result = $conn->query($sql);
+        while ($row = $result->fetch_assoc()) {
+            $user_mail = $row['email'];
+            $user_name = $row['name'];
+            $mail->addAddress($user_mail, $user_name);
+        }
+        break;
+        case '3': 
+            $sql = "SELECT * FROM vault_users WHERE role=$arole4";
+            $result = $conn->query($sql);
+            while ($row = $result->fetch_assoc()) {
+                $user_mail = $row['email'];
+                $user_name = $row['name'];
+                $mail->addAddress($user_mail, $user_name);
+            }
+            break;
+        case '4': 
+            $sql = "SELECT * FROM vault_users WHERE role=$rrole";
+            $result = $conn->query($sql);
+            while ($row = $result->fetch_assoc()) {
+                $user_mail = $row['email'];
+                $user_name = $row['name'];
+                $mail->addAddress($user_mail, $user_name);
+                }
+}
+
+
+
+
+
+
+// $sql = "SELECT * FROM vault_users WHERE id=$user_id";
+// $result = $conn->query($sql);
+// $row = $result->fetch_assoc();
+// $user_mail = $row['email'];
+// $user_name = $row['name'];
+// $role = $row['role'];
+// $mail->addAddress("$user_mail", "$user_name");
+//Set the subject line
+$mail->Subject = "Request Approved";
+//Read an HTML message body from an external file, convert referenced images to embedded,
+//convert HTML into a basic plain-text alternative body
+// echo "rtype_content-".$rtype."-rtype_content";
+//request copy
+$uri = "http://172.17.0.8/templates/approveView.php?user_id=$user_id&doc_id=$doc_id&app=$app";
+$mail->msgHTML(file_get_contents("$uri"), __DIR__);
+// if ($rtype == 1) {
+//     $uri = "http://172.17.0.5/templates/approve.php?user_id=$user_id&doc_id=$doc_id";
+//     $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+// }else{
+//     $uri = "http://172.17.0.5/templates/approveView.php?user_id=$user_id&doc_id=$doc_id&app=$app";
+//     $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+// }
+
+//Replace the plain text body with one created manually
+$mail->AltBody = 'This is a plain-text message body';
+//Attach an image file
+$mail->addAttachment('images/phpmailer_mini.png');
+
+//send the message, check for errors
+
+if (!$mail->send()) {
+    echo 'Mailer Error: ' . $mail->ErrorInfo;
+} else {
+    echo 'Message sent!';
+    header("Location: " . $_SERVER["HTTP_REFERER"]);
+}

actions/approve.php.bak

@@ -0,0 +1,9 @@
+<?php
+    include '../config.php';
+    $id = $_GET['id'];
+    $sql = "UPDATE request SET status=2 WHERE id=$id";
+    $result = $conn->query($sql);
+    if($result){
+        echo "Success!";
+    }
+    header("Location: " . $_SERVER["HTTP_REFERER"]);

actions/cancel.php

@@ -0,0 +1,9 @@
+<?php
+    include '../config.php';
+    $id = $_GET['id'];
+    $sql = "UPDATE request SET status=4 WHERE id=$id";
+    $result = $conn->query($sql);
+    if($result){
+        echo "Success!";
+    }
+    header("Location: " . $_SERVER["HTTP_REFERER"]);

actions/create.php

@@ -0,0 +1,191 @@
+<?php
+
+/**
+ * This example shows making an SMTP connection with authentication.
+ */
+
+//Import the PHPMailer class into the global namespace
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+use PHPMailer\PHPMailer\SMTP;
+
+if(PHP_SAPI=="cli"){
+    require 'phpmailer/src/Exception.php';
+    require 'phpmailer/src/PHPMailer.php';
+    require 'phpmailer/src/SMTP.php';
+}else{
+    require '../phpmailer/src/Exception.php';
+    require '../phpmailer/src/PHPMailer.php';
+    require '../phpmailer/src/SMTP.php';
+}
+
+//SMTP needs accurate times, and the PHP time zone MUST be set
+//This should be done in your php.ini, but this is how to do it if you don't have access to that
+date_default_timezone_set('Etc/UTC');
+
+//require '../vendor/autoload.php';
+
+//Create a new PHPMailer instance
+$mail = new PHPMailer();
+//Tell PHPMailer to use SMTP
+$mail->isSMTP();
+//Enable SMTP debugging
+//SMTP::DEBUG_OFF = off (for production use)
+//SMTP::DEBUG_CLIENT = client messages
+//SMTP::DEBUG_SERVER = client and server messages
+$mail->SMTPDebug = SMTP::DEBUG_OFF;
+//Set the hostname of the mail server
+$mail->Host = 'smtp-mail.outlook.com';
+//Set the SMTP port number - likely to be 25, 465 or 587
+$mail->Port = 587;
+//Whether to use SMTP authentication
+$mail->SMTPAuth = true;
+//Username to use for SMTP authentication
+$mail->Username = 'edms@premiummegastructures.com';
+//Password to use for SMTP authentication
+$mail->Password = 'oB4n4n4357';
+//Set who the message is to be sent from
+$mail->setFrom('edms@premiummegastructures.com', 'Vault Management');
+//Set an alternative reply-to address
+$mail->addReplyTo('edms@premiummegastructures.com', 'Vault Management');
+//Set who the message is to be sent to
+if(PHP_SAPI=="cli"){
+    include 'config.php';
+}else{
+    include '../config.php';
+}
+
+// $sql = "SELECT * FROM `request` ORDER BY id DESC LIMIT 1";
+$sql = "SELECT request.id,request.type, request.reason,request.document,
+               request.user_id,request.name,request.date, type.name as doc_type, 
+               documents.number, documents.description,documents.company
+               FROM `request` LEFT JOIN documents on documents.id = request.document 
+               LEFT JOIN type on type.id = documents.type ORDER BY id desc limit 1";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$id = $row['id'];
+//$rtype = $row['type'];
+if($row['type']==0){
+    $rtype='View';
+    }
+    else if($row['type']==1){
+        $rtype='Copy';
+    }else if ($row['type']==2){
+    $rtype='Original Copy';
+    }
+$reason = $row['reason'];
+$requestor = $row['name'];
+$document = $row['document'];
+$doc_type = $row['doc_type'];
+$number = $row['number'];
+$description =$row['description'];
+$company = $row['company'];
+//Sql query request order by id desc limit 1
+
+//$id = $_GET['id'];
+
+$doc_id = $_GET['doc_id'];
+$user_id = $_GET['user_id'];
+$role=$_GET['role'];
+$sql = "UPDATE request SET status=1 WHERE id=$id";
+$result = $conn->query($sql);
+if($result){
+    echo "Success!";
+}
+
+$sql = "SELECT * FROM vault_users WHERE role=$arole";
+$result = $conn->query($sql);
+while ($row = $result->fetch_assoc()) {
+    $user_mail = $row['email'];
+    $user_name = $row['name'];
+    $mail->addAddress($user_mail, $user_name);
+}
+
+
+//Set the subject line
+$mail->Subject = "New Request Created For Approval";
+//Read an HTML message body from an external file, convert referenced images to embedded,
+//convert HTML into a basic plain-text alternative body
+$uri = "http://172.17.0.8/templates/create.php?user_id=$user_id&doc_id=$doc_id";
+$plaintext = "
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #333333;
+    }
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+
+    table td {
+        padding: 8px;
+        border: 1px solid #dddddd;
+    }
+
+    table th {
+        padding: 8px;
+        border: 1px solid #dddddd;
+        background-color: #f2f2f2;
+        font-weight: bold;
+    }
+
+    a {
+        color: #0000FF;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+</style>
+Dear $user_name,<br><br>
+Greetings!<br><br>
+This is to inform you that a request requires your approval.<br>
+Here are the details of the document request:<br><br>
+<table>
+    <tr><td><b>Request ID</b></td><td>$id</td></tr>
+    <tr><td><b>Request Type</b></td><td>$rtype</td></tr>
+    <tr><td><b>Requestor</b></td><td>$requestor</td></tr>
+    <tr><td><b>Reason</b></td><td>$reason</td></tr>
+    <tr><td><b>Document ID</b></td><td>$document</td></tr>
+    <tr><td><b>Document Type</b></td><td>$doc_type</td></tr>
+    <tr><td><b>Document Number</b></td><td>$number</td></tr>
+    <tr><td><b>Document Description</b></td><td>$description</td></tr>
+</table><br>
+You may visit this URL to approve (or disapprove) this request: <a href='https://edms.pivi.com.ph/vault_req'>https://edms.pivi.com.ph/vault_req</a><br><br>
+Regards,<br>
+Team Vault Management";
+
+
+if(PHP_SAPI == "cli"){
+    $mail->Body = $plaintext;
+} else {
+    $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+    // $mail->Body = $plaintext;
+}
+
+
+//Replace the plain text body with one created manually
+$mail->AltBody = 'This is a plain-text message body';
+//Attach an image file
+//$mail->addAttachment('images/phpmailer_mini.png');
+
+//send the message, check for errors
+if (!$mail->send()) {
+    echo 'Mailer Error: ' . $mail->ErrorInfo;
+} else {
+if(PHP_SAPI!="cli"){
+        // echo "Message sent! - cli";
+        header("Location: ../index.php?role=$role&user_id=$user_id&company=$company");
+    }else{
+        echo 'Message sent! - no cli';
+        //header("Location: " . $_SERVER["HTTP_REFERER"]);
+        //header("Location: ../index.php?role=$role&user_id=$user_id");
+        }
+    
+}
+

actions/disapprove.php

@@ -0,0 +1,98 @@
+<?php
+
+/**
+ * This example shows making an SMTP connection with authentication.
+ */
+
+//Import the PHPMailer class into the global namespace
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+use PHPMailer\PHPMailer\SMTP;
+
+require '../phpmailer/src/Exception.php';
+require '../phpmailer/src/PHPMailer.php';
+require '../phpmailer/src/SMTP.php';
+
+//SMTP needs accurate times, and the PHP time zone MUST be set
+//This should be done in your php.ini, but this is how to do it if you don't have access to that
+date_default_timezone_set('Etc/UTC');
+
+//require '../vendor/autoload.php';
+
+//Create a new PHPMailer instance
+$mail = new PHPMailer();
+//Tell PHPMailer to use SMTP
+$mail->isSMTP();
+//Enable SMTP debugging
+//SMTP::DEBUG_OFF = off (for production use)
+//SMTP::DEBUG_CLIENT = client messages
+//SMTP::DEBUG_SERVER = client and server messages
+$mail->SMTPDebug = SMTP::DEBUG_OFF;
+//Set the hostname of the mail server
+$mail->Host = 'smtp-mail.outlook.com';
+//Set the SMTP port number - likely to be 25, 465 or 587
+$mail->Port = 587;
+//Whether to use SMTP authentication
+$mail->SMTPAuth = true;
+//Username to use for SMTP authentication
+$mail->Username = 'edms@premiummegastructures.com';
+//Password to use for SMTP authentication
+$mail->Password = 'oB4n4n4357';
+//Set who the message is to be sent from
+$mail->setFrom('edms@premiummegastructures.com', 'Vault Management');
+//Set an alternative reply-to address
+$mail->addReplyTo('edms@premiummegastructures.com', 'Vault Management');
+//Set who the message is to be sent to
+include '../config.php';
+$id = $_GET['id'];
+$doc_id = $_GET['doc_id'];
+$user_id = $_GET['user_id'];
+$role=$_GET['role'];
+// $sql = "UPDATE request SET status=5 WHERE id=$id";
+$sql = "SELECT status FROM request WHERE id=$id";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$currentStatus = $row['status'];
+$reqtype = $rtype;
+$newStatus = 0;
+
+if ($currentStatus == 1) {
+    $newStatus = 5; // First level of disapproval
+} elseif ($currentStatus == 2) {
+    $newStatus = 5; // Second level of disapproval
+} elseif ($currentStatus == 6) {
+    $newStatus = 5; // Third level of disapproval
+} elseif ($currentStatus == 7) {
+    $newStatus = 5; // Fourth level of disapproval
+} 
+$sql = "UPDATE request SET status=$newStatus WHERE id=$id";
+$result = $conn->query($sql);
+if($result){
+    echo "Success!";
+}
+
+$sql = "SELECT * FROM vault_users WHERE id=$user_id";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$user_mail = $row['email'];
+$user_name = $row['name'];
+$role = $row['role'];
+$mail->addAddress("$user_mail", "$user_name");
+//Set the subject line
+$mail->Subject = "Request Disapproved";
+//Read an HTML message body from an external file, convert referenced images to embedded,
+//convert HTML into a basic plain-text alternative body
+$uri = "http://172.17.0.8/templates/disapprove.php?user_id=$user_id&doc_id=$doc_id";
+$mail->msgHTML(file_get_contents("$uri"), __DIR__);
+//Replace the plain text body with one created manually
+$mail->AltBody = 'This is a plain-text message body';
+//Attach an image file
+//$mail->addAttachment('images/phpmailer_mini.png');
+
+//send the message, check for errors
+if (!$mail->send()) {
+    echo 'Mailer Error: ' . $mail->ErrorInfo;
+} else {
+    echo 'Message sent!';
+    header("Location: " . $_SERVER["HTTP_REFERER"]);
+}

actions/file_delete.php

@@ -0,0 +1,52 @@
+
+<?php
+
+
+    include '../config.php';
+  
+    $sql = "SELECT file_expire.id, file_expire.req_id, file_expire.doc_id, file_expire.temp,  file_expire.deleted,file_expire.uid, file_expire.cur_date, file_expire.exp_date
+    FROM file_expire";
+
+$result = $conn->query($sql);
+
+while ($row = $result->fetch_assoc()) {
+$id = $row['id'];
+$req_id = $row['req_id'];
+$doc_id = $row['doc_id'];
+$temp = $row['temp'];
+$deleted = $row['deleted'];
+$uid = $row['uid'];
+$exp_date = $row['exp_date'];
+
+$current_date = strtotime(date('Y-m-d'));
+
+if ($current_date > strtotime($exp_date)) {
+    
+    echo "Current Date: " . date('Y-m-d', $current_date) . "<br>";
+    echo "Expiration Date: " . $exp_date . "<br>";
+
+    if (file_exists($temp)) {
+        echo "File exists: " . $temp . "<br>";
+        if (unlink($temp)) {
+            echo "File deleted successfully.<br>";
+
+            // Update the deleted column for this specific row
+            $updateSql = "UPDATE file_expire SET deleted = 1";
+
+
+            if ($conn->query($updateSql) === TRUE) {
+                echo $id . "<br>";
+                echo "Deleted column updated successfully.<br>";
+            } else {
+                echo "Error updating deleted column: " . $conn->error . "<br>";
+            }
+        } else {
+            echo "Failed to delete the file.<br>";
+        }
+    } else {
+        echo "File does not exist: " . $temp . "<br>";
+    }
+}
+}
+
+    ?>

actions/print.php

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <?php
+    include '../header.php';
+    include '../config.php';
+    $id = $_GET['doc_id'];
+    $url = "qrcode.php?id=$id";
+    $sql = "SELECT documents.id,documents.number,type.name as doc_type,
+    documents.description,department.name as department,company.name as company, files.web_path as companyLogo,
+    city.name as city,province.name as province,documents.vault,documents.folder
+    FROM documents
+    LEFT JOIN type on type.id = documents.type
+    LEFT JOIN department on department.id = documents.department
+    LEFT JOIN company on company.id = documents.company
+    LEFT JOIN city on city.id = documents.city
+    LEFT JOIN province on province.id = documents.province
+    LEFT JOIN files ON files.id = company.logo
+    WHERE documents.id = $id;";
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $doc_no = $row['number'];
+    $doc_type = $row['doc_type'];
+    $description = $row['description'];
+    $department = $row['department'];
+    $company = $row['company'];
+    $companyLogo = $row['companyLogo'];
+    $city = $row['city'];
+    $province = $row['province'];
+    $folder = $row['folder'];
+    $vault = $row['vault'];
+    ?>
+</head>
+
+<body class="dt-example dt-example-bootstrap">
+    <div class="container">
+        <table class="table table-bordered">
+            <tr>
+                <td rowspan='4' width='150' style="text-align: center; vertical-align: middle;">
+                    <img src=<?php echo $url; ?> alt="" width="150" style="display: block; margin: auto;">
+                </td>
+                <th width='1'>Document_Number</th>
+                <td colspan=2><?php echo $doc_no; ?></td>
+                <th>Folder / Vault</th>
+                <td><?php echo $folder . " / " . $vault; ?></td>
+                <td rowspan='4' width='150' style="text-align: center; vertical-align: middle;">
+                    <img src="<?php echo $companyLogo; ?>" alt="" width="150" style="display: block; margin: auto;">
+                </td>
+            </tr>
+            <tr>
+                <th>Document_Type</th>
+                <td><?php echo $doc_type; ?></td>
+                <th>Description</th>
+                <td colspan=2><?php echo $description; ?></td>
+            </tr>
+            <tr>
+                <th>City</th>
+                <td><?php echo $city; ?></td>
+                <th>Province</th>
+                <td colspan=2><?php echo $province; ?></td>
+            </tr>
+            <tr>
+                <th>Department</th>
+                <td><?php echo $department; ?></td>
+                <th>Company</th>
+                <td colspan=2><?php echo $company; ?></td>
+            </tr>
+
+        </table>
+    </div>
+</body>
+
+</html>

actions/qrcode.php

@@ -0,0 +1,100 @@
+<?php
+
+// include '../phpqrcode/qrlib.php';
+// include '../config.php';
+
+// $id = $_GET['id'];
+// $sql = "SELECT 
+// documents.id,
+// documents.number,
+// type.name as doc_type,
+// documents.description,
+// department.name as department,
+// company.name as company, 
+// table_of_content.document as toc_content,
+// city.name as city,
+// province.name as province 
+// FROM documents
+// LEFT JOIN type on type.id = documents.type
+// LEFT JOIN department on department.id = documents.department
+// LEFT JOIN company on company.id = documents.company
+// LEFT JOIN city on city.id = documents.city
+// LEFT JOIN province on province.id = documents.province
+// LEFT JOIN table_of_content ON table_of_content.doc_id = documents.id
+// WHERE documents.id=$id;";
+// $result = $conn->query($sql);
+// $row = $result->fetch_assoc();
+// $json_str = json_encode($row);
+
+// QRcode::png("$json_str");
+
+include '../phpqrcode/qrlib.php';
+include '../config.php';
+
+$id = $_GET['id'];
+$sql = "SELECT 
+    documents.id,
+    documents.number,
+    type.name as doc_type,
+    documents.description,
+    department.name as department,
+    company.name as company, 
+    table_of_content.number as toc_number,
+    table_of_content.document as toc_content,
+    city.name as city,
+    province.name as province 
+FROM documents
+LEFT JOIN type on type.id = documents.type
+LEFT JOIN department on department.id = documents.department
+LEFT JOIN company on company.id = documents.company
+LEFT JOIN city on city.id = documents.city
+LEFT JOIN province on province.id = documents.province
+LEFT JOIN table_of_content ON table_of_content.doc_id = documents.id
+WHERE documents.id=$id;";
+
+$result = $conn->query($sql);
+
+$rows = [];
+$tableOfContents = []; // Array to hold Table of Contents entries
+
+while ($row = $result->fetch_assoc()) {
+    $rows[$row['id']] = [
+        'id' => $row['id'],
+        'number' => $row['number'],
+        'doc_type' => $row['doc_type'],
+        'description' => $row['description'],
+        'department' => $row['department'],
+        'company' => $row['company'],
+        'city' => $row['city'],
+        'province' => $row['province']
+    ];
+    
+    // Store Table of Contents entries separately
+    $tableOfContents[$row['id']][] = [
+        'toc_number' => $row['toc_number'],
+        'toc_content' => $row['toc_content']
+    ];
+}
+
+// Combine document details
+$combinedContent = implode(", ", array_map(function ($row) {
+    return  "ID: " . $row['id'] . ", " .
+        "Number: " . $row['number'] . ", " .
+        "Type: " . $row['doc_type'] . ", " .
+        "Description: " . $row['description'] . ", " .
+        "Department: " . $row['department'] . ", " .
+        "Company: " . $row['company'] . ", " .
+        "City: " . $row['city'] . ", " .
+        "Province: " . $row['province'];
+}, $rows));
+
+// Combine Table of Contents entries
+foreach ($tableOfContents as $docId => $tocEntries) {
+    $combinedContent .= ", Table of Contents for Document ID $docId: " . implode(", ", array_map(function ($entry) {
+        return $entry['toc_content'] . ': ' . $entry['toc_number'];
+    }, $tocEntries));
+}
+
+$json_str = json_encode(['document_details' => $combinedContent]);
+
+QRcode::png("$json_str");

actions/release.php

@@ -0,0 +1,152 @@
+<?php
+
+/**
+ * This example shows making an SMTP connection with authentication.
+ */
+
+//Import the PHPMailer class into the global namespace
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+use PHPMailer\PHPMailer\SMTP;
+
+require '../phpmailer/src/Exception.php';
+require '../phpmailer/src/PHPMailer.php';
+require '../phpmailer/src/SMTP.php';
+
+//SMTP needs accurate times, and the PHP time zone MUST be set
+//This should be done in your php.ini, but this is how to do it if you don't have access to that
+date_default_timezone_set('Etc/UTC');
+
+//require '../vendor/autoload.php';
+
+//Create a new PHPMailer instance
+$mail = new PHPMailer();
+//Tell PHPMailer to use SMTP
+$mail->isSMTP();
+//Enable SMTP debugging
+//SMTP::DEBUG_OFF = off (for production use)
+//SMTP::DEBUG_CLIENT = client messages
+//SMTP::DEBUG_SERVER = client and server messages
+$mail->SMTPDebug = SMTP::DEBUG_OFF;
+//Set the hostname of the mail server
+$mail->Host = 'smtp-mail.outlook.com';
+//Set the SMTP port number - likely to be 25, 465 or 587
+$mail->Port = 587;
+//Whether to use SMTP authentication
+$mail->SMTPAuth = true;
+//Username to use for SMTP authentication
+$mail->Username = 'edms@premiummegastructures.com';
+//Password to use for SMTP authentication
+$mail->Password = 'oB4n4n4357';
+//Set who the message is to be sent from
+$mail->setFrom('edms@premiummegastructures.com', 'Vault Management');
+//Set an alternative reply-to address
+$mail->addReplyTo('edms@premiummegastructures.com', 'Vault Management');
+//Set who the message is to be sent to
+include '../config.php';
+// $reqid=$_GET['id'];
+$id = $_GET['id'];
+$doc_id = $_GET['doc_id'];
+$user_id = $_GET['user_id'];
+$rtype =$_GET['type'];
+$reqtype = $rtype;
+
+$sql = "SELECT files.web_path FROM request
+        LEFT JOIN documents ON request.document = documents.id
+        LEFT JOIN files ON documents.file = files.id
+        WHERE request.id = $id";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$filepath = $row['web_path'];
+
+$view_file = '..'.$filepath; // Replace this with the actual source file path
+
+$destination_folder = "../temp_files/"; // Replace this with the actual destination folder path
+
+if (file_exists($view_file)) {
+    // Get the filename from the source file path
+    $filename = basename($view_file);
+
+    // Generate a unique 3-letter code
+    $uniqueCode = strtoupper(substr(md5(uniqid(rand(), true)), 0, 3));
+
+    // Add the code to the filename
+    $newFilename =  $filename . '_' . $uniqueCode ;
+
+    // Create the destination file path by combining the destination folder path and the new filename
+    $destinationFilePath = $destination_folder . $newFilename;
+
+    // Copy the file from source to destination
+    if (copy($view_file, $destinationFilePath)) {
+        echo "File copied successfully!";
+    } else {
+        echo "Failed to copy the file.";
+    }
+} else {
+    echo "Source file not found.";
+}
+
+        
+$sql = "UPDATE request SET status=3 WHERE id=$id";
+$result = $conn->query($sql);
+$uid = uniqid();
+// $cur_date = date('Y-m-d');
+// // $exp_date = date('Y-m-d', strtotime('+1 day'));
+// $exp_date = new DateTime(); 
+// $exp_date->modify('+24 hours'); 
+// $exp_date = $exp_date->format('Y-m-d'); 
+$cur_date = date('Y-m-d H:i:s'); // Get the current date and time
+$exp_date = new DateTime($cur_date); // Create a new DateTime object with the current date and time
+$exp_date->modify('+24 hours'); // Add 24 hours to the DateTime object
+$exp_date = $exp_date->format('Y-m-d H:i:s'); // Format the DateTime object as 'Y-m-d H:i:s' and store it in $exp_date
+
+$deleted = 0;
+if($result){
+    echo "Success!";
+
+    if ($reqtype == 0) {
+       
+        $sql_insert = "INSERT INTO file_expire (req_id, doc_id, temp, deleted, uid, cur_date, exp_date) VALUES ($id, $doc_id, '$destinationFilePath' ,$deleted, '$uid', '$cur_date', '$exp_date')";
+        $result_insert = $conn->query($sql_insert);
+    }
+}
+$sql = "SELECT * FROM vault_users WHERE id=$user_id";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$user_mail = $row['email'];
+$user_name = $row['name'];
+$role = $row['role'];
+$mail->addAddress("$user_mail", "$user_name");
+//Set the subject line
+$mail->Subject = "Request Released";
+
+if ($reqtype == 0) {
+    $uri = "http://172.17.0.8/templates/release.php?user_id=$user_id&doc_id=$doc_id&reqid=$id&uid=$uid";
+    $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+}elseif ($reqtype == 1){
+    $uri = "http://172.17.0.8/templates/releaseCopy.php?user_id=$user_id&doc_id=$doc_id";
+    $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+}elseif ($reqtype == 2){
+    $uri = "http://172.17.0.8/templates/releaseOC.php?user_id=$user_id&doc_id=$doc_id";
+    $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+}
+
+//Read an HTML message body from an external file, convert referenced images to embedded,
+//convert HTML into a basic plain-text alternative body
+// $uri = "http://172.17.0.5/templates/release.php?user_id=$user_id&doc_id=$doc_id";
+// $mail->msgHTML(file_get_contents("$uri"), __DIR__);
+//Replace the plain text body with one created manually
+$mail->AltBody = 'This is a plain-text message body';
+//Attach an image file
+//$mail->addAttachment('images/phpmailer_mini.png');
+
+//send the message, check for errors
+if (!$mail->send()) {
+    echo 'Mailer Error: ' . $mail->ErrorInfo;
+} else {
+    echo 'Message sent!';
+    header("Location: " . $_SERVER["HTTP_REFERER"]);
+}
+
+
+

actions/request.php

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <?php
+    include '../header.php';
+    include '../config.php';
+    $role = $_GET['role'];
+    $user_id = $_GET['user_id'];
+    $doc_id = $_GET['doc_id'];
+    $sql = "SELECT documents.id,documents.number,type.name as doc_type,
+            documents.description,department.name as department,company.name as company,
+            city.name as city,province.name as province
+            FROM documents
+            LEFT JOIN type on type.id = documents.type
+            LEFT JOIN department on department.id = documents.department
+            LEFT JOIN company on company.id = documents.company
+            LEFT JOIN city on city.id = documents.city
+            LEFT JOIN province on province.id = documents.province
+            WHERE documents.id=$doc_id;";
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $doc_no = $row['number'];
+    $doc_type = $row['doc_type'];
+    $description = $row['description'];
+    $department = $row['department'];
+    $company = $row['company'];
+    $city = $row['city'];
+    $province = $row['province'];
+    $requestor = $row['name'];
+    if(isset($_GET['reason'])){
+        $rtype = $_GET['rtype'];
+        $reason = $_GET['reason'];
+        $rsql = "SELECT * FROM vault_users WHERE id=$user_id";
+        $rresult = $conn->query($rsql);
+        $rrow = $rresult->fetch_assoc();
+        $user_name = $rrow['name'];
+        $user_company = $rrow['company'];
+        $isql = "INSERT INTO request (type, reason, document, user_id, name, company) VALUES ($rtype,'$reason',$doc_id,$user_id,'$user_name',$user_company)";
+        $iresult = $conn->query($isql);
+        //$irow = $iresult->fetch_assoc();
+        //header("Location: ../index.php?role=$role&user_id=$user_id");
+        header("Location: create.php?doc_id=$doc_id&user_id=$user_id");
+        exit();
+    }
+    ?>
+</head>
+
+<body class="dt-example dt-example-bootstrap" style="background-color: rgba(0, 0, 0, 0);">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-3">&nbsp;</div>
+            <div class="col-sm-6">
+                <div class="panel panel-default">
+                    <div class="panel-heading">Document Request</div>
+                    <div class="panel-body">
+                        <form action="request.php">
+                            <div class="form-group">
+                                <label for="rtype">Request Type:</label>
+                                <select class="form-control" id="rtype" name="rtype">
+                                    <option value="0">View</option>
+                                    <option value="1">Copy</option>
+                                    <option value="2">Original Copy</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="reason">Reason:</label>
+                                <textarea class="form-control" rows="5" id="reason" name="reason" required></textarea>
+                            </div>
+                            <input type="hidden" name="doc_id" value="<?php echo $doc_id; ?>" />
+                            <input type="hidden" name="user_id" value="<?php echo $user_id; ?>" />
+                            <div class="well">
+                                <?php
+                                    echo "Doc. ID: ".$doc_id."<br>";
+                                    echo "Doc. No.: ".$doc_no."<br>";
+                                    echo "Doc. Type: ".$doc_type."<br>";
+                                    echo "Description: ".$description."<br>";
+                                    echo "City: ".$city."<br>";
+                                    echo "Province: ".$province."<br>";
+                                    echo "Department: ".$department."<br>";
+                                    echo "Document Company: ".$company."<br>";
+                                    $conn->close();
+                                ?>
+                            </div>
+                            <button type="submit" class="btn btn-default">Submit</button>
+                            <button class="btn btn-default" onclick="history.back()">Cancel</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">&nbsp;</div>
+        </div>
+    </div>
+</body>
+
+</html>

api/city/index.php

@@ -0,0 +1,12 @@
+<?php
+include_once '../../editor/lib/DataTables.php';
+
+$city = $db
+    ->select( 'city', ['id as value', 'name as label'], ['pid' => $_REQUEST['values']['documents.province']] )
+    ->fetchAll();
+ 
+echo json_encode( [
+    'options' => [
+        'documents.city' => $city
+    ]
+] );

api/province/index.php

@@ -0,0 +1,12 @@
+<?php
+include_once '../../editor/lib/DataTables.php';
+
+$province = $db
+    ->select( 'province', ['id as value', 'name as label'], ['rid' => $_REQUEST['values']['documents.region']] )
+    ->fetchAll();
+ 
+echo json_encode( [
+    'options' => [
+        'documents.province' => $province
+    ]
+] );

arequests.php

@@ -0,0 +1,80 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+    DataTables\Editor,
+    DataTables\Editor\Field,
+    DataTables\Editor\Format,
+    DataTables\Editor\Mjoin,
+    DataTables\Editor\Options,
+    DataTables\Editor\Upload,
+    DataTables\Editor\Validate,
+    DataTables\Editor\ValidateOptions;
+    
+if (isset($_POST['type'])) {
+    $type = $_POST['type'];
+} else {
+    $type = '%';
+}
+if ($_POST['status']>6) {
+    $status1 = 7;
+    $status2 = 8;
+} else {
+    $status1 = $_POST['status'];
+    $status2 = $_POST['status'];
+}
+// Build our Editor instance and process the data coming from _POST
+Editor::inst($db, 'request')
+    ->where('request.type', $type, 'LIKE')
+    ->where( function ( $q ) use ($status1, $status2) {
+        $q
+        ->where('request.status', $status1 )
+        ->or_where('request.status', $status2 );
+        } )
+        
+    ->fields(
+        Field::inst('request.id'),
+        Field::inst('request.type'),
+        Field::inst('request.reason'),
+        Field::inst('request.status')
+            ->options(
+                Options::inst()
+                    ->table('status')
+                    ->value('id')
+                    ->label('name')
+            )
+            ->validator(Validate::dbValues()),
+        Field::inst('documents.number'),
+        Field::inst('type.name'),
+        Field::inst('documents.description'),
+        Field::inst('status.name'),
+        Field::inst('request.document')
+            ->options(
+                Options::inst()
+                    ->table('documents')
+                    ->value('id')
+                    ->label('description')
+            )
+            ->validator(Validate::dbValues()),
+        Field::inst('request.user_id'),
+        Field::inst('request.name'),
+        Field::inst('request.date'),
+        Field::inst('request.company'),
+        Field::inst('company2.name'),
+        Field::inst('documents.company'),
+        Field::inst('company.name'),
+    )
+    ->leftJoin('status', 'status.id', '=', 'request.status')
+    ->leftJoin('documents', 'documents.id', '=', 'request.document')
+    ->leftJoin('type', 'type.id', '=', 'documents.type')
+    ->leftJoin('company', 'company.id', '=', 'documents.company')
+    ->leftJoin('company AS company2', 'company2.id', '=', 'request.company')
+    ->process($_POST)
+    ->json();

arequests2.php

@@ -0,0 +1,81 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+    DataTables\Editor,
+    DataTables\Editor\Field,
+    DataTables\Editor\Format,
+    DataTables\Editor\Mjoin,
+    DataTables\Editor\Options,
+    DataTables\Editor\Upload,
+    DataTables\Editor\Validate,
+    DataTables\Editor\ValidateOptions;
+// if (isset($_POST['type'])) {
+//     $type = $_POST['type'];
+// } else {
+//     $type = '%';
+// }
+// if ($_POST['status']>6) {
+    // if ($_POST['role']=$arole){
+    //     $status1 = 2;
+    // };
+ 
+// } else {
+//     $status1 = $_POST['status'];
+//     $status2 = $_POST['status'];
+// }
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst($db, 'request')
+    ->where('request.status', $_POST['status'])
+    // ->where( function ( $q ) use ($status1,) {
+    //     $q
+    //     ->where('request.status', $status1 );
+    //     // ->or_where('request.status', $status2 );
+    //     } )
+    ->fields(
+        Field::inst('request.id'),
+        Field::inst('request.type'),
+        Field::inst('request.reason'),
+        Field::inst('request.status')
+            ->options(
+                Options::inst()
+                    ->table('status')
+                    ->value('id')
+                    ->label('name')
+            )
+            ->validator(Validate::dbValues()),
+        Field::inst('documents.number'),
+        Field::inst('type.name'),
+        Field::inst('documents.description'),
+        Field::inst('status.name'),
+        Field::inst('request.document')
+            ->options(
+                Options::inst()
+                    ->table('documents')
+                    ->value('id')
+                    ->label('description')
+            )
+            ->validator(Validate::dbValues()),
+        Field::inst('request.user_id'),
+        Field::inst('request.name'),
+        Field::inst('request.date'),
+        Field::inst('request.company'),
+        Field::inst('company2.name'),
+        Field::inst('documents.company'),
+        Field::inst('company.name'),
+    )
+    ->leftJoin('status', 'status.id', '=', 'request.status')
+    ->leftJoin('documents', 'documents.id', '=', 'request.document')
+    ->leftJoin('type', 'type.id', '=', 'documents.type')
+    ->leftJoin('company', 'company.id', '=', 'documents.company')
+    ->leftJoin('company AS company2', 'company2.id', '=', 'request.company')
+    ->process($_POST)
+    ->json();

company.php

@@ -0,0 +1,42 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+DataTables\Editor,
+DataTables\Editor\Field,
+DataTables\Editor\Format,
+DataTables\Editor\Mjoin,
+DataTables\Editor\Options,
+DataTables\Editor\Upload,
+DataTables\Editor\Validate,
+DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst($db, 'company')
+	->fields(
+		Field::inst('id'),
+		Field::inst('code'),
+		Field::inst('name'),
+		Field::inst('holdings'),
+		Field::inst('logo')
+	->setFormatter( Format::ifEmpty( null ) )
+    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__NAME__' )
+    ->db( 'files', 'id', array(
+        'filename'    => Upload::DB_FILE_NAME, 
+        'filesize'    => Upload::DB_FILE_SIZE,
+        'web_path'    => Upload::DB_WEB_PATH,
+        'system_path' => Upload::DB_SYSTEM_PATH
+    ) )
+    ->validator( Validate::fileSize( 50000000, 'Files must be smaller than 50MB' ) )
+    ->validator( Validate::fileExtensions( array( 'jpg', 'jpeg', 'png' ), "Please upload PDF only" ) )
+),
+	)
+	->process($_POST)
+	->json();

company_list.php

@@ -0,0 +1,115 @@
+<script type="text/javascript" language="javascript" class="init">
+    var editor; // use a global for the submit and return data rendering in the examples
+
+    $(document).ready(function() {
+        editor = new $.fn.dataTable.Editor({
+            ajax: "company.php",
+            table: "#company",
+            fields: [{
+                label: "Code:",
+                name: "code"
+            }, {
+                label: "Name:",
+                name: "name"
+            }, {
+                label: "Holdings:",
+                name: "holdings"
+            }, {
+                label: "File:",
+                name: "logo",
+                type: "upload",
+                display: function(file_id) {
+                    // Extract the filename from the web_path
+                    const filename = editor.file('files', file_id).web_path.split('/').pop();
+
+                    // Display the PDF icon and filename
+                    return `<i class="fa fa-file-pdf-o"></i> ${filename}`;
+                },
+                clearText: "Clear",
+                noImageText: 'No Logo',
+
+            }]
+        });
+        $('#company').DataTable({
+            dom: "Bfrtip",
+            ajax: "company.php",
+            columns: [{
+                    data: "id"
+                },
+                {
+                    data: "code"
+                },
+                {
+                    data: "name"
+                },
+                {
+                    data: "holdings"
+                },
+                {
+                    // data: "logo",
+                    // render: function(file_id) {
+                    //     if (file_id) {
+                    //         // Extract the filename from the web_path
+                    //         const filename = editor.file('files', file_id).web_path.split('/').pop();
+
+                    //         // Display the PDF icon and filename
+                    //         return `<i class="fa fa-file-pdf-o"></i> ${filename}`;
+                    //     } else {
+                    //         return 'No Logo';
+                    //     }
+                    // },
+                    // title: 'Logo'
+                    data: "logo",
+                    render: function(file_id) {
+                        if (file_id) {
+                            // Extract the filename and web path
+                            const file = editor.file('files', file_id);
+                            const filename = file.web_path.split('/').pop();
+                            const webPath = file.web_path;
+
+                            // Display the image using an img tag
+                            return `<img src="${webPath}" alt="${filename}" style="max-width: 100px; max-height: 100px;">`;
+                        } else {
+                            return 'No Logo';
+                        }
+                    },
+                    title: 'Logo'
+                }
+            ],
+            select: true,
+            buttons: [{
+                    extend: "create",
+                    editor: editor
+                },
+                {
+                    extend: "edit",
+                    editor: editor
+                },
+                {
+                    extend: "remove",
+                    editor: editor
+                }
+            ]
+        });
+    });
+</script>
+<table id="company" class="display responsive nowrap" style="width:100%">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Code</th>
+            <th>Name</th>
+            <th>Holdings</th>
+            <th>Company Logo</th>
+        </tr>
+    </thead>
+    <tfoot>
+        <tr>
+            <th>ID</th>
+            <th>Code</th>
+            <th>Name</th>
+            <th>Holdings</th>
+            <th>Company Logo</th>
+        </tr>
+    </tfoot>
+</table>

config.php

@@ -0,0 +1,19 @@
+<?php
+$servername = "172.17.0.10";
+$username = "admin";
+$password = "dJUxe4S8Ios0";
+$dbname = "vault";
+$conn = new mysqli($servername, $username, $password, $dbname);
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+$sql = "SELECT * FROM setup";
+$result = $conn->query($sql);
+$row = $result->fetch_assoc();
+$urole = $row['urole'];
+$arole = $row['arole'];
+$rrole = $row['rrole'];
+$arole2 = $row['arole2'];
+$arole3 = $row['arole3'];
+$arole4 = $row['arole4'];
+

dashboard.php

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .container {
+            max-width: 100%;
+            max-height: 100%;
+            margin: 0 auto;
+            padding-top: 30px;
+            padding-top: 30px;
+            padding-bottom: 30px;
+        }
+
+        .chart-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 500px;
+            max-height: 100%;
+            margin-top: 30px;
+        }
+
+        /* Custom CSS rule to adjust card width */
+        .card {
+            padding: 10px;
+            background-color: #B4B4B4;
+            margin: 5px;
+        }
+
+        /* Custom CSS rule to adjust iframe height */
+        iframe {
+            height: 700px;
+        }
+    </style>
+</head>
+<body  style="background-color: rgba(0, 0, 0, 0);">
+
+
+    <?php
+    include 'config.php';
+    $user_id = $_GET['user_id'];
+    $role = $_GET['role'];
+    if(($role==$arole) or ($role==$rrole)){
+        $sql = "SELECT COUNT(user_id) FROM `request`";
+    } else {
+        $sql = "SELECT COUNT(user_id) FROM `request` where user_id=$user_id";
+
+        
+    }
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $request = $row['COUNT(user_id)'];
+
+
+    if(($role==$arole) or ($role==$rrole)){
+        $sql = "SELECT COUNT(user_id) FROM `request`where status=1" ;
+    } else {
+        $sql = "SELECT COUNT(user_id)FROM `request` where user_id=$user_id AND status=1";
+    }
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $pending = $row['COUNT(user_id)'];
+
+    if(($role==$arole) or ($role==$rrole)){
+        $sql = "SELECT COUNT(user_id) FROM `request`where status=2";
+    } else {
+        $sql = "SELECT COUNT(user_id)FROM `request` where user_id=$user_id AND status=2";;
+    }
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $approve = $row['COUNT(user_id)'];
+
+    if(($role==$arole) or ($role==$rrole)){
+        $sql = "SELECT COUNT(user_id) FROM `request`where status=3";
+    } else {
+        $sql = "SELECT COUNT(user_id)FROM `request` where user_id=$user_id AND status=3";
+    }
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $release = $row['COUNT(user_id)'];
+
+    if(($role==$arole) or ($role==$rrole)){
+        $sql = "SELECT COUNT(user_id) FROM `request`where status=4";
+    } else {
+        $sql = "SELECT COUNT(user_id)FROM `request` where user_id=$user_id AND status=4";
+    }
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $cancelled = $row['COUNT(user_id)'];
+
+    if(($role==$arole) or ($role==$rrole)){
+        $sql = "SELECT COUNT(user_id) FROM `request`where status=5";
+    } else {
+        $sql = "SELECT COUNT(user_id)FROM `request` where user_id=$user_id AND status=5";
+    }
+    $result = $conn->query($sql);
+    $row = $result->fetch_assoc();
+    $disapproved = $row['COUNT(user_id)'];
+        
+    
+
+
+
+    // Simulated pie chart data
+    $chartData = [
+        'Pending' => $pending,
+        'Approved' => $approve,
+        'Released' => $release,
+        'Cancelled' => $cancelled,
+        'Disapproved' => $disapproved
+    ];
+    ?>
+
+    <div class="row">
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Requests</h5>
+                    <p class="card-text"><?php echo $request; ?></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Pending</h5>
+                    <p class="card-text"><?php echo $pending; ?></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Approved</h5>
+                    <p class="card-text"><?php echo $approve; ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Released</h5>
+                    <p class="card-text"><?php echo $release; ?></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Disapproved</h5>
+                    <p class="card-text"><?php echo $disapproved; ?></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Cancelled</h5>
+                    <p class="card-text"><?php echo $cancelled; ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12 chart-container">
+            <canvas id="pieChart"></canvas>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Pie chart data
+    var pieChartData = {
+        labels: <?php echo json_encode(array_keys($chartData)); ?>,
+        datasets: [{
+            data: <?php echo json_encode(array_values($chartData)); ?>,
+            backgroundColor: [
+                '#666666',
+                '#999999',
+                '#CCCCCC',
+                '#DDDDDD',
+                '#AAAAAA'
+            ]
+        }]
+    };
+
+    // Create the pie chart
+    var ctx = document.getElementById('pieChart').getContext('2d');
+    new Chart(ctx, {
+        type: 'pie',
+        data: pieChartData
+    });
+</script>
+
+</html>

department.php

@@ -0,0 +1,29 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+DataTables\Editor,
+DataTables\Editor\Field,
+DataTables\Editor\Format,
+DataTables\Editor\Mjoin,
+DataTables\Editor\Options,
+DataTables\Editor\Upload,
+DataTables\Editor\Validate,
+DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst($db, 'department')
+	->fields(
+		Field::inst('id'),
+		Field::inst('code'),
+		Field::inst('name')
+	)
+	->process($_POST)
+	->json();

department_list.php

@@ -0,0 +1,50 @@
+<script type="text/javascript" language="javascript" class="init">
+
+    var editor; // use a global for the submit and return data rendering in the examples
+
+    $(document).ready(function () {
+        editor = new $.fn.dataTable.Editor({
+            ajax: "department.php",
+            table: "#department",
+            fields: [{
+                label: "Code:",
+                name: "code"
+            }, {
+                label: "Name:",
+                name: "name"
+            }
+            ]
+        });
+        $('#department').DataTable({
+            dom: "Bfrtip",
+            ajax: "department.php",
+            columns: [
+                { data: "id" },
+                { data: "code" },
+                { data: "name" }
+            ],
+            select: true,
+            buttons: [
+                { extend: "create", editor: editor },
+                { extend: "edit", editor: editor },
+                { extend: "remove", editor: editor }
+            ]
+        });
+    });
+</script>
+<table id="department" class="display responsive nowrap" style="width:100%">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Code</th>
+            <th>Name</th>
+        </tr>
+    </thead>
+    <tfoot>
+        <tr>
+            <th>ID</th>
+            <th>Code</th>
+            <th>Name</th>
+        </tr>
+    </tfoot>
+</table>

documents.php

@@ -0,0 +1,148 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+DataTables\Editor,
+DataTables\Editor\Field,
+DataTables\Editor\Format,
+DataTables\Editor\Mjoin,
+DataTables\Editor\Options,
+DataTables\Editor\Upload,
+DataTables\Editor\Validate,
+DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+function logChange ( $db, $action, $id, &$values ) {
+    $db->insert( 'change_log', array(
+        'user'   => $_POST['user'],
+        'table_' => 'documents',
+        'action' => $action,
+        'values' => json_encode( $values ),
+        'row'    => $id
+        //'when'   => date('c')
+    ) );
+}
+
+$company = $_POST['company'];
+$company2 = $_POST['company2'];
+
+Editor::inst($db, 'documents')
+	->where(function($q) use ($company, $company2) {
+        $q->where('documents.company', $company)
+          ->or_where('documents.company', $company2);
+    })
+	->fields(
+		Field::inst('documents.id'),
+		Field::inst('documents.date'),
+		Field::inst('documents.type')
+			->options(
+				Options::inst()
+					->table('type')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.lot_number'),
+		Field::inst('documents.description'),
+		Field::inst('documents.company')
+			->options(
+				Options::inst()
+					->table('company')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.department')
+			->options(
+				Options::inst()
+					->table('department')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.region')
+			->options(
+				Options::inst()
+					->table('region')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.province')
+			->options(
+				Options::inst()
+					->table('province')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.city'),
+		Field::inst('documents.number'),
+		Field::inst('documents.area'),
+		Field::inst('documents.unit')
+			->options(
+				Options::inst()
+					->table('unit')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.file')
+	// 	->setFormatter( Format::ifEmpty( null ) )
+	// 	->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
+	// 	->db( 'files', 'id', array(
+	// 		'filename'    => Upload::DB_FILE_NAME,
+	// 		'filesize'    => Upload::DB_FILE_SIZE,
+	// 		'web_path'    => Upload::DB_WEB_PATH,
+	// 		'system_path' => Upload::DB_SYSTEM_PATH
+	// 	) )
+	// 	->validator( Validate::fileSize( 10000000, 'Files must be smaller than 10MB' ) )
+	// 	->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload PDF only" ) )
+	// ),
+	->setFormatter( Format::ifEmpty( null ) )
+    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__NAME__' )
+    ->db( 'files', 'id', array(
+        'filename'    => Upload::DB_FILE_NAME, 
+        'filesize'    => Upload::DB_FILE_SIZE,
+        'web_path'    => Upload::DB_WEB_PATH,
+        'system_path' => Upload::DB_SYSTEM_PATH
+    ) )
+    ->validator( Validate::fileSize( 50000000, 'Files must be smaller than 50MB' ) )
+    ->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload PDF only" ) )
+),
+		Field::inst('documents.vault'),
+		Field::inst('documents.folder'),
+		Field::inst('type.name'),
+		Field::inst('company.name'),
+		Field::inst('department.name'),
+		Field::inst('unit.name'),
+		Field::inst('region.name'),
+		Field::inst('province.name'),
+		Field::inst('city.name')
+	)
+
+	->on( 'postCreate', function ( $editor, $id, &$values, &$row ) {
+        logChange( $editor->db(), 'create', $id, $values );
+    } )
+    ->on( 'postEdit', function ( $editor, $id, &$values, &$row ) {
+        logChange( $editor->db(), 'edit', $id, $values );
+    } )
+
+	->leftJoin('city', 'city.id', '=', 'documents.city')
+	->leftJoin('province', 'province.id', '=', 'documents.province')
+	->leftJoin('region', 'region.id', '=', 'documents.region')
+	->leftJoin('unit', 'unit.id', '=', 'documents.unit')
+	->leftJoin('department', 'department.id', '=', 'documents.department')
+	->leftJoin('company', 'company.id', '=', 'documents.company')
+	->leftJoin('type', 'type.id', '=', 'documents.type')
+	->process($_POST)
+	->json();
+

documents2.php

@@ -0,0 +1,139 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+DataTables\Editor,
+DataTables\Editor\Field,
+DataTables\Editor\Format,
+DataTables\Editor\Mjoin,
+DataTables\Editor\Options,
+DataTables\Editor\Upload,
+DataTables\Editor\Validate,
+DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+function logChange ( $db, $action, $id, &$values ) {
+    $db->insert( 'change_log', array(
+        'user'   => $_POST['user'],
+        'table_' => 'documents',
+        'action' => $action,
+        'values' => json_encode( $values ),
+        'row'    => $id
+        //'when'   => date('c')
+    ) );
+}
+Editor::inst($db, 'documents')
+	->fields(
+		Field::inst('documents.id'),
+		Field::inst('documents.date'),
+		Field::inst('documents.type')
+			->options(
+				Options::inst()
+					->table('type')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.lot_number'),
+		Field::inst('documents.description'),
+		Field::inst('documents.company')
+			->options(
+				Options::inst()
+					->table('company')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.department')
+			->options(
+				Options::inst()
+					->table('department')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.region')
+			->options(
+				Options::inst()
+					->table('region')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.province')
+			->options(
+				Options::inst()
+					->table('province')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.city'),
+		Field::inst('documents.number'),
+		Field::inst('documents.area'),
+		Field::inst('documents.unit')
+			->options(
+				Options::inst()
+					->table('unit')
+					->value('id')
+					->label('name')
+			)
+			->validator(Validate::dbValues()),
+		Field::inst('documents.file')
+	// 	->setFormatter( Format::ifEmpty( null ) )
+	// 	->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
+	// 	->db( 'files', 'id', array(
+	// 		'filename'    => Upload::DB_FILE_NAME,
+	// 		'filesize'    => Upload::DB_FILE_SIZE,
+	// 		'web_path'    => Upload::DB_WEB_PATH,
+	// 		'system_path' => Upload::DB_SYSTEM_PATH
+	// 	) )
+	// 	->validator( Validate::fileSize( 10000000, 'Files must be smaller than 10MB' ) )
+	// 	->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload PDF only" ) )
+	// ),
+	->setFormatter( Format::ifEmpty( null ) )
+    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__NAME__' )
+    ->db( 'files', 'id', array(
+        'filename'    => Upload::DB_FILE_NAME, 
+        'filesize'    => Upload::DB_FILE_SIZE,
+        'web_path'    => Upload::DB_WEB_PATH,
+        'system_path' => Upload::DB_SYSTEM_PATH
+    ) )
+    ->validator( Validate::fileSize( 50000000, 'Files must be smaller than 50MB' ) )
+    ->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload PDF only" ) )
+),
+		Field::inst('documents.vault'),
+		Field::inst('documents.folder'),
+		Field::inst('type.name'),
+		Field::inst('company.name'),
+		Field::inst('department.name'),
+		Field::inst('unit.name'),
+		Field::inst('region.name'),
+		Field::inst('province.name'),
+		Field::inst('city.name')
+	)
+
+	->on( 'postCreate', function ( $editor, $id, &$values, &$row ) {
+        logChange( $editor->db(), 'create', $id, $values );
+    } )
+    ->on( 'postEdit', function ( $editor, $id, &$values, &$row ) {
+        logChange( $editor->db(), 'edit', $id, $values );
+    } )
+
+	->leftJoin('city', 'city.id', '=', 'documents.city')
+	->leftJoin('province', 'province.id', '=', 'documents.province')
+	->leftJoin('region', 'region.id', '=', 'documents.region')
+	->leftJoin('unit', 'unit.id', '=', 'documents.unit')
+	->leftJoin('department', 'department.id', '=', 'documents.department')
+	->leftJoin('company', 'company.id', '=', 'documents.company')
+	->leftJoin('type', 'type.id', '=', 'documents.type')
+	->process($_POST)
+	->json();
+

dtype_list.php

@@ -0,0 +1,44 @@
+<script type="text/javascript" language="javascript" class="init">
+
+    var editor; // use a global for the submit and return data rendering in the examples
+
+    $(document).ready(function () {
+        editor = new $.fn.dataTable.Editor({
+            ajax: "dtypes.php",
+            table: "#dtypes",
+            fields: [{
+                label: "Name:",
+                name: "name"
+            }
+            ]
+        });
+        $('#dtypes').DataTable({
+            dom: "Bfrtip",
+            ajax: "dtypes.php",
+            columns: [
+                { data: "id" },
+                { data: "name" }
+            ],
+            select: true,
+            buttons: [
+                { extend: "create", editor: editor },
+                { extend: "edit", editor: editor },
+                { extend: "remove", editor: editor }
+            ]
+        });
+    });
+</script>
+<table id="dtypes" class="display responsive nowrap" style="width:100%">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+        </tr>
+    </thead>
+    <tfoot>
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+        </tr>
+    </tfoot>
+</table>

dtypes.php

@@ -0,0 +1,28 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include("editor/lib/DataTables.php");
+
+// Alias Editor classes so they are easy to use
+use
+DataTables\Editor,
+DataTables\Editor\Field,
+DataTables\Editor\Format,
+DataTables\Editor\Mjoin,
+DataTables\Editor\Options,
+DataTables\Editor\Upload,
+DataTables\Editor\Validate,
+DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst($db, 'type')
+	->fields(
+		Field::inst('id'),
+		Field::inst('name')
+	)
+	->process($_POST)
+	->json();

editor/controllers/README.txt

@@ -0,0 +1,17 @@
+# Editor PHP example scripts
+
+The files in this directory are the PHP server-side scripts that are used by the
+Editor examples with a PHP back-end, making use of the provided PHP libraries in
+the Editor package (see the `php` directory at the top level of the Editor
+package).
+
+For full information on using the Editor PHP libraries, please refer to the
+Editor manual online:
+	https://editor.datatables.net/manual/php
+
+If you are interested in using Editor with a server-side environment that does
+not have PHP available, please refer to the client / server communication
+protocol that Editor uses, for information on how to write server-script scripts
+that will operate with Editor:
+	https://editor.datatables.net/manual/server
+

editor/controllers/checkbox.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * Example PHP implementation used for the checkbox.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'phone' ),
+		Field::inst( 'city' ),
+		Field::inst( 'zip' ),
+		Field::inst( 'active' )
+			->setFormatter( function ( $val, $data, $opts ) {
+				return ! $val ? 0 : 1;
+			} )
+	)
+	->process( $_POST )
+	->json();
+

editor/controllers/compoundKey.php

@@ -0,0 +1,77 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+// The key thing to note for compound key support is the use of an array as the
+// third parameter for the Editor constructor, which is used to tell Editor what
+// the primary key column(s) are called (default is just `id`).
+Editor::inst( $db, 'users_visits', array('user_id', 'visit_date') )
+	->debug( true )
+	->field( 
+		Field::inst( 'users_visits.user_id' )
+            ->options( Options::inst()
+                ->table( 'users' )
+                ->value( 'id' )
+                ->label( array('first_name', 'last_name') )
+            )
+			->validator( Validate::dbValues() ),
+		Field::inst( 'users_visits.site_id' )
+            ->options( Options::inst()
+                ->table( 'sites' )
+                ->value( 'id' )
+                ->label( 'name' )
+            )
+			->validator( Validate::dbValues() ),
+		Field::inst( 'users_visits.visit_date' )
+			->validator( Validate::dateFormat( 'Y-m-d' ) )
+			->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
+			->setFormatter( Format::dateFormatToSql('Y-m-d' ) ),
+		Field::inst( 'sites.name' )
+			->set( false ),
+		Field::inst( 'users.first_name' )
+			->set( false ),
+		Field::inst( 'users.last_name' )
+			->set( false )
+	)
+	->leftJoin( 'sites', 'users_visits.site_id', '=', 'sites.id' )
+	->leftJoin( 'users', 'users_visits.user_id', '=', 'users.id' )
+	->validator( function ($editor, $action, $data) {
+		if ( $action == Editor::ACTION_EDIT ) {
+			// Detect duplicates
+			foreach ($data['data'] as $key => $values) {
+				// Get the row's primary key components
+				$pkey = $editor->pkeyToArray( $key );
+
+				// Discount the row being edited
+				if ( $pkey['users_visits']['user_id'] != $values['users_visits']['user_id'] ||
+					 $pkey['users_visits']['visit_date'] != $values['users_visits']['visit_date'] )
+				{
+					// Are there any rows that conflict?
+					$any = $editor->db()->any( 'users_visits', function ($q) use ($pkey, $values) {
+						$q->where( 'user_id', $values['users_visits']['user_id']);
+						$q->where( 'visit_date', $values['users_visits']['visit_date'] );
+					} );
+
+					// If there was a matching row, then report an error
+					if ( $any ) {
+						return 'This staff member is already busy that day.';
+					}
+				}
+			}
+		}
+	} )
+	->process($_POST)
+	->json();

editor/controllers/dates.php

@@ -0,0 +1,54 @@
+<?php
+
+/*
+ * Example PHP implementation used for date examples
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Allow a number of different formats to be submitted for the various demos
+$format = isset( $_GET['format'] ) ?
+	$_GET['format'] :
+	'';
+
+if ( $format === 'custom' ) {
+	$update = 'n/j/Y';
+	$registered = 'l j F Y';
+}
+else {
+	$update = "Y-m-d";
+	$registered = "Y-m-d";
+}
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'updated_date' )
+			->validator( Validate::dateFormat(
+				$update,
+				ValidateOptions::inst()
+					->allowEmpty( false )
+			) )
+			->getFormatter( Format::dateSqlToFormat( $update ) )
+			->setFormatter( Format::dateFormatToSql( $update ) ),
+		Field::inst( 'registered_date' )
+			->validator( Validate::dateFormat( $registered ) )
+			->getFormatter( Format::dateSqlToFormat( $registered ) )
+			->setFormatter( Format::dateFormatToSql( $registered ) )
+	)
+	->process( $_POST )
+	->json();

editor/controllers/datetime.php

@@ -0,0 +1,55 @@
+<?php
+
+/*
+ * Example PHP implementation used for date time examples
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'updated_date' )
+			->validator( Validate::dateFormat(
+				'm-d-Y g:i A',
+				ValidateOptions::inst()
+					->allowEmpty( false )
+			) )
+			->getFormatter( Format::datetime(
+				'Y-m-d H:i:s',
+				'm-d-Y g:i A'
+			) )
+			->setFormatter( Format::datetime(
+				'm-d-Y g:i A',
+				'Y-m-d H:i:s'
+			) ),
+		Field::inst( 'registered_date' )
+			->validator( Validate::dateFormat(
+				'j M Y H:i'
+			) )
+			->getFormatter( Format::datetime(
+				'Y-m-d H:i:s',
+				'j M Y H:i'
+			) )
+			->setFormatter( Format::datetime(
+				'j M Y H:i',
+				'Y-m-d H:i:s'
+			) )
+	)
+	->process( $_POST )
+	->json();

editor/controllers/join.php

@@ -0,0 +1,37 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+/*
+ * Example PHP implementation used for the join.html example
+ */
+Editor::inst( $db, 'users' )
+	->field( 
+		Field::inst( 'users.first_name' ),
+		Field::inst( 'users.last_name' ),
+		Field::inst( 'users.phone' ),
+		Field::inst( 'users.site' )
+			->options( Options::inst()
+				->table( 'sites' )
+				->value( 'id' )
+				->label( 'name' )
+			)
+			->validator( Validate::dbValues() ),
+		Field::inst( 'sites.name' )
+	)
+	->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+	->process($_POST)
+	->json();

editor/controllers/joinArray.php

@@ -0,0 +1,52 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+/*
+ * Example PHP implementation used for the join.html example
+ */
+Editor::inst( $db, 'users' )
+	->field( 
+		Field::inst( 'users.first_name' ),
+		Field::inst( 'users.last_name' ),
+		Field::inst( 'users.site' )
+			->options( Options::inst()
+				->table( 'sites' )
+				->value( 'id' )
+				->label( 'name' )
+			),
+		Field::inst( 'sites.name' )
+	)
+	->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+	->join(
+		Mjoin::inst( 'permission' )
+			->link( 'users.id', 'user_permission.user_id' )
+			->link( 'permission.id', 'user_permission.permission_id' )
+			->order( 'name asc' )
+			->validator( 'permission[].id', Validate::mjoinMaxCount(4, 'No more than four selections please') )
+			->fields(
+				Field::inst( 'id' )
+					->validator( Validate::required() )
+					->options( Options::inst()
+						->table( 'permission' )
+						->value( 'id' )
+						->label( 'name' )
+					),
+				Field::inst( 'name' )
+			)
+	)
+	->process($_POST)
+	->json();

editor/controllers/joinLinkTable.php

@@ -0,0 +1,45 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+/*
+ * Example PHP implementation used for the joinLinkTable.html example
+ */
+
+Editor::inst( $db, 'users' )
+	->field(
+		Field::inst( 'users.first_name' ),
+		Field::inst( 'users.last_name' ),
+		Field::inst( 'users.site' )
+            ->options( Options::inst()
+                ->table( 'sites' )
+                ->value( 'id' )
+                ->label( 'name' )
+            ),
+		Field::inst( 'sites.name' ),
+		Field::inst( 'user_dept.dept_id' )
+            ->options( Options::inst()
+                ->table( 'dept' )
+                ->value( 'id' )
+                ->label( 'name' )
+            ),
+		Field::inst( 'dept.name' )
+	)
+	->leftJoin( 'sites',     'sites.id',          '=', 'users.site' )
+	->leftJoin( 'user_dept', 'users.id',          '=', 'user_dept.user_id' )
+	->leftJoin( 'dept',      'user_dept.dept_id', '=', 'dept.id' )
+	->process($_POST)
+	->json();

editor/controllers/joinSelf.php

@@ -0,0 +1,41 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+/*
+ * Example PHP implementation used for the joinSelf.html example - the basic idea
+ * here is that the join performed is simply to get extra information about the
+ * 'manager' (in this case, the name of the manager). To alter the manager for
+ * a user, you would change the 'manager' value in the 'users' table, so the
+ * information from the join is read-only.
+ */
+Editor::inst( $db, 'users' )
+	->debug( true )
+	->field( 
+		Field::inst( 'users.first_name' ),
+		Field::inst( 'users.last_name' ),
+		Field::inst( 'users.manager' )
+            ->options( Options::inst()
+                ->table( 'users' )
+                ->value( 'id' )
+                ->label( array('first_name', 'last_name') )
+            ),
+		Field::inst( 'manager.first_name' ),
+		Field::inst( 'manager.last_name' )
+	)
+	->leftJoin( 'users as manager', 'users.manager', '=', 'manager.id' )
+	->process($_POST)
+	->json();

editor/controllers/jsonId.php

@@ -0,0 +1,63 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+$out = Editor::inst( $db, 'datatables_demo' )
+	->fields(
+		Field::inst( 'id' )->set(false), // ID is automatically set by the database on create
+		Field::inst( 'first_name' )
+		->validator( Validate::notEmpty( ValidateOptions::inst()
+			->message( 'A first name is required' )	
+		) ),
+		Field::inst( 'last_name' )
+			->validator( Validate::notEmpty( ValidateOptions::inst()
+				->message( 'A last name is required' )	
+			) ),
+		Field::inst( 'position' ),
+		Field::inst( 'email' )
+			->validator( Validate::email( ValidateOptions::inst()
+				->message( 'Please enter an e-mail address' )	
+			) ),
+		Field::inst( 'office' ),
+		Field::inst( 'extn' ),
+		Field::inst( 'age' )
+			->validator( Validate::numeric() )
+			->setFormatter( Format::ifEmpty(null) ),
+		Field::inst( 'salary' )
+			->validator( Validate::numeric() )
+			->setFormatter( Format::ifEmpty(null) ),
+		Field::inst( 'start_date' )
+			->validator( Validate::dateFormat( 'Y-m-d' ) )
+			->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
+			->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
+	)
+	->process( $_POST )
+	->data();
+
+// On 'read' remove the DT_RowId property so we can see fully how the `idSrc`
+// option works on the client-side.
+if ( Editor::action( $_POST ) === Editor::ACTION_READ ) {
+	for ( $i=0, $ien=count($out['data']) ; $i<$ien ; $i++ ) {
+		unset( $out['data'][$i]['DT_RowId'] );
+	}
+}
+
+// Send it back to the client
+echo json_encode( $out );

editor/controllers/rest/create.php

@@ -0,0 +1,18 @@
+<?php
+
+/*
+ * Example PHP implementation used for the REST 'create' interface.
+ */
+
+include( "staff-rest.php" );
+
+$data = $editor
+	->process($_POST)
+	->data();
+
+// If there is an error, indicate it like a REST service would with a status code
+if ( isset($data['fieldErrors']) && count($data['fieldErrors']) ) {
+	http_response_code( 400 );
+}
+
+echo json_encode( $data );

editor/controllers/rest/edit.php

@@ -0,0 +1,22 @@
+<?php
+
+/*
+ * Example PHP implementation used for the REST 'create' interface.
+ */
+
+include( "staff-rest.php" );
+
+// The REST example uses 'PUT' for the input, so we need to get the 
+// parameters being sent to us from php://input
+parse_str( file_get_contents('php://input'), $args );
+
+$data = $editor
+	->process($args)
+	->data();
+
+// If there is an error, indicate it like a REST service would with a status code
+if ( isset($data['fieldErrors']) && count($data['fieldErrors']) ) {
+	http_response_code( 400 );
+}
+
+echo json_encode( $data );

editor/controllers/rest/get.php

@@ -0,0 +1,12 @@
+<?php
+
+/*
+ * Example PHP implementation used for the REST 'get' interface
+ */
+
+include( "staff-rest.php" );
+
+$editor
+	->process($_POST)
+	->json();
+

editor/controllers/rest/remove.php

@@ -0,0 +1,12 @@
+<?php
+
+/*
+ * Example PHP implementation used for the REST 'delete' interface.
+ */
+
+include( "staff-rest.php" );
+
+$editor
+	->process( $_GET )
+	->json();
+

editor/controllers/rest/staff-rest.php

@@ -0,0 +1,50 @@
+<?php
+
+/*
+ * Example PHP implementation used for the REST example.
+ * This file defines a DTEditor class instance which can then be used, as
+ * required, by the CRUD actions.
+ */
+
+// DataTables PHP library
+include( dirname(__FILE__)."/../../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+$editor = Editor::inst( $db, 'datatables_demo' )
+	->fields(
+		Field::inst( 'first_name' )
+		->validator( Validate::notEmpty( ValidateOptions::inst()
+			->message( 'A first name is required' )	
+		) ),
+	Field::inst( 'last_name' )
+		->validator( Validate::notEmpty( ValidateOptions::inst()
+			->message( 'A last name is required' )	
+		) ),
+	Field::inst( 'position' ),
+	Field::inst( 'email' )
+		->validator( Validate::email( ValidateOptions::inst()
+			->message( 'Please enter an e-mail address' )	
+		) ),
+	Field::inst( 'office' ),
+	Field::inst( 'extn' ),
+	Field::inst( 'age' )
+		->validator( Validate::numeric() )
+		->setFormatter( Format::ifEmpty(null) ),
+	Field::inst( 'salary' )
+		->validator( Validate::numeric() )
+		->setFormatter( Format::ifEmpty(null) ),
+	Field::inst( 'start_date' )
+		->validator( Validate::dateFormat( 'Y-m-d' ) )
+		->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
+		->setFormatter( Format::dateFormatToSql('Y-m-d' ) )	);

editor/controllers/searchPanes.php

@@ -0,0 +1,52 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+    DataTables\Editor\ValidateOptions,
+    DataTables\Editor\SearchPaneOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->field( 
+        Field::inst( 'users.first_name' )
+            ->searchPaneOptions(SearchPaneOptions::inst()
+        ),
+		Field::inst( 'users.last_name' )
+            ->searchPaneOptions( SearchPaneOptions::inst()),
+		Field::inst( 'users.phone' )
+            ->searchPaneOptions( SearchPaneOptions::inst()
+                ->table( 'users')
+                ->value( 'phone' )
+            ),
+        Field::inst( 'users.site' )
+            ->options( Options::inst()
+				->table( 'sites' )
+				->value( 'id' )
+				->label( 'name' )
+			)
+            ->validator( Validate::dbValues() ),
+        Field::inst( 'sites.name' )
+            ->searchPaneOptions( SearchPaneOptions::inst()
+                ->value( 'sites.name')
+                ->label( 'sites.name' )
+                ->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+            )
+    )
+    ->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+    ->debug(true)
+	->process($_POST)
+    ->json();

editor/controllers/sequence.php

@@ -0,0 +1,51 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'audiobooks' )
+	->fields(
+		Field::inst( 'title' )->validator( 'Validate::notEmpty' ),
+		Field::inst( 'author' )->validator( 'Validate::notEmpty' ),
+		Field::inst( 'duration' )->validator( 'Validate::notEmpty' ),
+		Field::inst( 'readingOrder' )->validator( 'Validate::numeric' )
+	)
+	->on( 'preCreate', function ( $editor, $values ) {
+		// On create update all the other records to make room for our new one
+		$editor->db()
+			->query( 'update', 'audiobooks' )
+			->set( 'readingOrder', 'readingOrder+1', false )
+			->where( 'readingOrder', $values['readingOrder'], '>=' )
+			->exec();
+	} )
+	->on( 'preRemove', function ( $editor, $id, $values ) {
+		// On remove, the sequence needs to be updated to decrement all rows
+		// beyond the deleted row. Get the current reading order by id (don't
+		// use the submitted value in case of a multi-row delete).
+		$order = $editor->db()
+			->select( 'audiobooks', 'readingOrder', array('id' => $id) )
+			->fetch();
+
+		$editor->db()
+			->query( 'update', 'audiobooks' )
+			->set( 'readingOrder', 'readingOrder-1', false )
+			->where( 'readingOrder', $order['readingOrder'], '>' )
+			->exec();
+	} )
+	->process( $_POST )
+	->json();

editor/controllers/sites.php

@@ -0,0 +1,30 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+Editor::inst( $db, 'sites' )
+    ->fields(
+        Field::inst( 'id' )->set( false ),
+        Field::inst( 'name' )->validator( 'Validate::notEmpty' )
+    )
+    ->join(
+        Mjoin::inst( 'users' )
+            ->link( 'sites.id', 'users.site' )
+            ->fields(
+                Field::inst( 'id' )
+            )
+    )
+    ->process( $_POST )
+    ->json();

editor/controllers/softDelete.php

@@ -0,0 +1,44 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+/*
+ * Example PHP implementation used for the join.html example
+ */
+Editor::inst( $db, 'users' )
+	->field(
+		Field::inst( 'users.first_name' ),
+		Field::inst( 'users.last_name' ),
+		Field::inst( 'users.phone' ),
+		Field::inst( 'users.removed_date' )
+            ->setFormatter( Format::ifEmpty( null ) ),
+		Field::inst( 'users.site' )
+			->options( Options::inst()
+				->table( 'sites' )
+				->value( 'id' )
+				->label( 'name' )
+			)
+			->validator( Validate::dbValues() ),
+		Field::inst( 'sites.name' )
+	)
+	->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+    ->where( 'users.removed_date', null )
+    ->on( 'preRemove', function () {
+        // Disallow all delete actions since data cannot be removed completely
+        return false;
+    } )
+	->process($_POST)
+	->json();

editor/controllers/staff-description.php

@@ -0,0 +1,37 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions,
+	DataTables\Editor\SearchPaneOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' )
+			->validator( Validate::notEmpty( ValidateOptions::inst()
+				->message( 'A first name is required' )	
+			) ),
+		Field::inst( 'last_name' )
+			->validator( Validate::notEmpty( ValidateOptions::inst()
+				->message( 'A last name is required' )	
+			) ),
+		Field::inst( 'city' ),
+		Field::inst( 'description' )
+	)
+	->process( $_POST )
+	->json();

editor/controllers/staff-html.php

@@ -0,0 +1,35 @@
+<?php
+
+/*
+ * Example PHP implementation used for the htmlTable.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+Editor::inst( $db, 'datatables_demo' )
+	->fields(
+		Field::inst( 'first_name' )->validator( 'Validate::notEmpty' ),
+		Field::inst( 'last_name' )->validator( 'Validate::notEmpty' ),
+		Field::inst( 'position' ),
+		Field::inst( 'office' ),
+		Field::inst( 'salary' )
+			->validator( 'Validate::numeric' )
+			->getFormatter( function ( $val ) {
+				return '$'.number_format($val);
+			} )
+			->setFormatter( 'Format::ifEmpty', null )
+	)
+	->process( $_POST )
+	->json();

editor/controllers/staff-view.php

@@ -0,0 +1,32 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->readTable('staff_newyork') // The VIEW to read data from
+	->field( 
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'phone' ),
+		Field::inst( 'city' ),
+		Field::inst( 'site' )
+			->get(false)
+			->setValue(4) // New York, for the VIEW condition
+	)
+	->tryCatch(false)
+	->debug(true)
+	->process($_POST)
+	->json();

editor/controllers/staff.php

@@ -0,0 +1,51 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'datatables_demo' )
+	->fields(
+		Field::inst( 'first_name' )
+			->validator( Validate::notEmpty( ValidateOptions::inst()
+				->message( 'A first name is required' )	
+			) ),
+		Field::inst( 'last_name' )
+			->validator( Validate::notEmpty( ValidateOptions::inst()
+				->message( 'A last name is required' )	
+			) ),
+		Field::inst( 'position2' ),
+		Field::inst( 'email' )
+			->validator( Validate::email( ValidateOptions::inst()
+				->message( 'Please enter an e-mail address' )	
+			) ),
+		Field::inst( 'office' ),
+		Field::inst( 'extn' ),
+		Field::inst( 'age' )
+			->validator( Validate::numeric() )
+			->setFormatter( Format::ifEmpty(null) ),
+		Field::inst( 'salary' )
+			->validator( Validate::numeric() )
+			->setFormatter( Format::ifEmpty(null) ),
+		Field::inst( 'start_date' )
+			->validator( Validate::dateFormat( 'Y-m-d' ) )
+			->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
+			->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
+	)
+	->process( $_POST )
+	->json();

editor/controllers/standalone.php

@@ -0,0 +1,14 @@
+<?php
+
+// The Editor standalone examples don't actually save to the database as the
+// behaviour of such an edit will depend highly upon the structure of your
+// database. However using the Database methods such as update() this can easily
+// be done.
+//
+// See the PHP manual - http://editor.datatables.net/manual/php - for
+// information on how to use the Editor PHP libraries.
+
+echo json_encode( array(
+	"data" => array( $_POST['data']['keyless'] )
+) );
+

editor/controllers/tableOnlyData.php

@@ -0,0 +1,32 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'updated_date' )
+			->set( false )
+			->getFormatter( Format::dateSqlToFormat('D, jS F Y') )
+	)
+	->process( $_POST )
+	->json();
+

editor/controllers/time.php

@@ -0,0 +1,44 @@
+<?php
+
+/*
+ * Example PHP implementation used for time examples
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'city' ),
+		Field::inst( 'shift_start' )
+			->validator( Validate::dateFormat(
+				'g:i A',
+				ValidateOptions::inst()
+					->allowEmpty( false )
+			) )
+			->getFormatter( Format::datetime( 'H:i:s', 'g:i A' ) )
+			->setFormatter( Format::datetime( 'g:i A', 'H:i:s' ) ),
+		Field::inst( 'shift_end' )
+			->validator( Validate::dateFormat(
+				'H:i:s',
+				ValidateOptions::inst()
+					->allowEmpty( false )
+			) )
+	)
+	->process( $_POST )
+	->json();
+

editor/controllers/todo.php

@@ -0,0 +1,33 @@
+<?php
+
+/*
+ * Example PHP implementation for the client-side table formatting example.
+ * This is basically the same as the 'fieldTypes' example, but in this case
+ * note that there is no server-side formatting of the 'done' field - rather it
+ * is done in the DataTable in this example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'todo' )
+	->fields(
+		Field::inst( 'item' ),
+		Field::inst( 'done' ),
+		Field::inst( 'priority' )
+	)
+	->process( $_POST )
+	->json();
+

editor/controllers/upload-many.php

@@ -0,0 +1,55 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'users.first_name' ),
+		Field::inst( 'users.last_name' ),
+		Field::inst( 'users.phone' ),
+		Field::inst( 'users.site' )
+            ->options( Options::inst()
+                ->table( 'sites' )
+                ->value( 'id' )
+                ->label( 'name' )
+            ),
+		Field::inst( 'sites.name' )
+	)
+	->join(
+		Mjoin::inst( 'files' )
+			->link( 'users.id', 'users_files.user_id' )
+			->link( 'files.id', 'users_files.file_id' )
+			->fields(
+				Field::inst( 'id' )
+					->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
+						->db( 'files', 'id', array(
+							'filename'    => Upload::DB_FILE_NAME,
+							'filesize'    => Upload::DB_FILE_SIZE,
+							'web_path'    => Upload::DB_WEB_PATH,
+							'system_path' => Upload::DB_SYSTEM_PATH
+						) )
+						->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
+						->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
+					)
+			)
+	)
+	->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+	->process( $_POST )
+	->json();

editor/controllers/upload.php

@@ -0,0 +1,43 @@
+<?php
+
+/*
+ * Example PHP implementation used for the index.html example
+ */
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+
+// Build our Editor instance and process the data coming from _POST
+Editor::inst( $db, 'users' )
+	->fields(
+		Field::inst( 'first_name' ),
+		Field::inst( 'last_name' ),
+		Field::inst( 'phone' ),
+		Field::inst( 'city' ),
+		Field::inst( 'image' )
+			->setFormatter( Format::ifEmpty( null ) )
+			->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
+				->db( 'files', 'id', array(
+					'filename'    => Upload::DB_FILE_NAME,
+					'filesize'    => Upload::DB_FILE_SIZE,
+					'web_path'    => Upload::DB_WEB_PATH,
+					'system_path' => Upload::DB_SYSTEM_PATH
+				) )
+				->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
+				->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
+			)
+	)
+	->process( $_POST )
+	->json();

editor/controllers/users.php

@@ -0,0 +1,35 @@
+<?php
+
+// DataTables PHP library
+include( "../lib/DataTables.php" );
+
+// Alias Editor classes so they are easy to use
+use
+	DataTables\Editor,
+	DataTables\Editor\Field,
+	DataTables\Editor\Format,
+	DataTables\Editor\Mjoin,
+	DataTables\Editor\Options,
+	DataTables\Editor\Upload,
+	DataTables\Editor\Validate,
+	DataTables\Editor\ValidateOptions;
+
+if ( ! isset($_POST['site']) || ! is_numeric($_POST['site']) ) {
+    echo json_encode( [ "data" => [] ] );
+}
+else {
+    Editor::inst( $db, 'users' )
+        ->field(
+            Field::inst( 'users.first_name' ),
+            Field::inst( 'users.last_name' ),
+            Field::inst( 'users.phone' ),
+            Field::inst( 'users.site' )
+                ->options( 'sites', 'id', 'name' )
+                ->validator( 'Validate::dbValues' ),
+            Field::inst( 'sites.name' )
+        )
+        ->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
+        ->where( 'site', $_POST['site'] )
+        ->process($_POST)
+        ->json();
+}

editor/css/editor.bootstrap.css

@@ -0,0 +1,890 @@
+@charset "UTF-8";
+div.DTE div.DTE_Form_Error {
+  color: #b11f1f;
+}
+
+div.modal div.DTE div.DTE_Form_Error {
+  display: none;
+  float: left;
+  padding-top: 7px;
+}
+
+div.DTE_Field {
+  position: relative;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field div:not([data-dte-e=msg-error]) {
+  color: inherit;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input.form-control {
+  height: 30px;
+}
+div.DTE_Inline div.DTE_Field div.help-block {
+  display: none;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+div.DTE_Inline.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Field_Type_checkbox div.controls,
+div.DTE_Field_Type_radio div.controls {
+  margin-top: 0.4em;
+}
+div.DTE_Field_Type_checkbox div.controls label,
+div.DTE_Field_Type_radio div.controls label {
+  margin-left: 0.75em;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  zoom: 1;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 42px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid black;
+  background-color: #ccc;
+  text-align: center;
+  border-radius: 11px;
+  cursor: pointer;
+  z-index: 12;
+  box-shadow: 2px 2px 6px #111;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover {
+  background-color: #999;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  max-width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+  flex: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label {
+  padding: 0 0 4px 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  font-size: 14px;
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  padding-top: 3px;
+  text-align: center;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+  padding-bottom: 5px;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.editor-datetime {
+  position: absolute;
+  background-color: white;
+  z-index: 2050;
+  border: 1px solid #ccc;
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
+  padding: 0 20px 6px 20px;
+  width: 275px;
+}
+div.editor-datetime div.editor-datetime-title {
+  text-align: center;
+  padding: 5px 0px 3px;
+}
+div.editor-datetime table {
+  border-spacing: 0;
+  margin: 12px 0;
+  width: 100%;
+}
+div.editor-datetime table.editor-datetime-table-nospace {
+  margin-top: -12px;
+}
+div.editor-datetime table th {
+  font-size: 0.8em;
+  color: #777;
+  font-weight: normal;
+  width: 14.285714286%;
+  padding: 0 0 4px 0;
+  text-align: center;
+}
+div.editor-datetime table td {
+  font-size: 0.9em;
+  color: #444;
+  padding: 0;
+}
+div.editor-datetime table td.selectable {
+  text-align: center;
+  background: #f5f5f5;
+}
+div.editor-datetime table td.selectable.disabled {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.disabled button:hover {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.now {
+  background-color: #ddd;
+}
+div.editor-datetime table td.selectable.now button {
+  font-weight: bold;
+}
+div.editor-datetime table td.selectable.selected button {
+  background: #337ab7;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.selectable button:hover {
+  background: #ff8000;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.editor-datetime-week {
+  font-size: 0.7em;
+}
+div.editor-datetime table button {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+  padding: 4px 0;
+  cursor: pointer;
+  margin: 0;
+}
+div.editor-datetime table button span {
+  display: inline-block;
+  min-width: 14px;
+  text-align: right;
+}
+div.editor-datetime table.weekNumber th {
+  width: 12.5%;
+}
+div.editor-datetime div.editor-datetime-calendar table {
+  margin-top: 0;
+}
+div.editor-datetime div.editor-datetime-label {
+  position: relative;
+  display: inline-block;
+  height: 30px;
+  padding: 5px 6px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-label:hover {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+}
+div.editor-datetime div.editor-datetime-label select {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  cursor: pointer;
+  opacity: 0;
+  -ms-filter: "alpha(opacity=0)";
+}
+div.editor-datetime.horizontal {
+  width: 550px;
+}
+div.editor-datetime.horizontal div.editor-datetime-date,
+div.editor-datetime.horizontal div.editor-datetime-time {
+  width: 48%;
+}
+div.editor-datetime.horizontal div.editor-datetime-time {
+  margin-left: 4%;
+}
+div.editor-datetime div.editor-datetime-date {
+  position: relative;
+  float: left;
+  width: 100%;
+}
+div.editor-datetime div.editor-datetime-time {
+  position: relative;
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+div.editor-datetime div.editor-datetime-time > span {
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-time th {
+  text-align: left;
+}
+div.editor-datetime div.editor-datetime-time div.editor-datetime-timeblock {
+  display: inline-block;
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-iconLeft,
+div.editor-datetime div.editor-datetime-iconRight,
+div.editor-datetime div.editor-datetime-iconUp,
+div.editor-datetime div.editor-datetime-iconDown {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.3;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+div.editor-datetime div.editor-datetime-iconLeft:hover,
+div.editor-datetime div.editor-datetime-iconRight:hover,
+div.editor-datetime div.editor-datetime-iconUp:hover,
+div.editor-datetime div.editor-datetime-iconDown:hover {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: #f0f0f0;
+  opacity: 0.6;
+}
+div.editor-datetime div.editor-datetime-iconLeft button,
+div.editor-datetime div.editor-datetime-iconRight button,
+div.editor-datetime div.editor-datetime-iconUp button,
+div.editor-datetime div.editor-datetime-iconDown button {
+  border: none;
+  background: transparent;
+  text-indent: 30px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-iconLeft {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
+}
+div.editor-datetime div.editor-datetime-iconRight {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconUp {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconDown {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC");
+}
+
+div.editor-datetime-error {
+  clear: both;
+  padding: 0 1em;
+  max-width: 240px;
+  font-size: 11px;
+  line-height: 1.25em;
+  text-align: center;
+  color: #b11f1f;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 9px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+table.dataTable tbody tr.highlight {
+  background-color: #3399ff !important;
+}
+table.dataTable tbody tr.highlight,
+table.dataTable tbody tr.noHighlight,
+table.dataTable tbody tr.highlight td,
+table.dataTable tbody tr.noHighlight td {
+  -webkit-transition: background-color 500ms linear;
+  -moz-transition: background-color 500ms linear;
+  -ms-transition: background-color 500ms linear;
+  -o-transition: background-color 500ms linear;
+  transition: background-color 500ms linear;
+}
+
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 20px;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 52px;
+  right: 12px;
+}
+
+/*
+ * Namespace: DTED - DataTables Editor Display - Envelope
+ */
+div.DTED_Envelope_Wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  height: 100%;
+  z-index: 11;
+  display: none;
+  overflow: hidden;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Shadow {
+  position: absolute;
+  top: -10px;
+  left: 10px;
+  right: 10px;
+  height: 10px;
+  z-index: 10;
+  box-shadow: 0 0 20px black;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container {
+  position: absolute;
+  top: 0;
+  left: 5%;
+  width: 90%;
+  border-left: 1px solid #777;
+  border-right: 1px solid #777;
+  border-bottom: 1px solid #777;
+  box-shadow: 3px 3px 10px #555;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  background-color: white;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTE_Processing_Indicator {
+  right: 36px;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTE_Footer {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close {
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  z-index: 12;
+  text-align: center;
+  font-size: 12px;
+  background: #F8F8F8;
+  background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
+  background: -moz-linear-gradient(top, white, #CCC);
+  background: linear-gradient(to bottom, white, #CCC);
+  text-shadow: 0 1px 0 white;
+  border: 1px solid #999;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  box-shadow: 0px 0px 1px #999;
+  -moz-box-shadow: 0px 0px 1px #999;
+  -webkit-box-shadow: 0px 0px 1px #999;
+}
+
+div.DTED_Envelope_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.4);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.1)), color-stop(1, rgba(0, 0, 0, 0.4)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* W3C Markup, IE10 Release Preview */
+}
+
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close {
+  top: 10px;
+  background: transparent;
+  text-shadow: none;
+  box-shadow: none;
+  border: none;
+  font-size: 21px;
+  color: black;
+  opacity: 0.2;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close:hover {
+  opacity: 1;
+}

editor/css/editor.bootstrap4.css

@@ -0,0 +1,935 @@
+@charset "UTF-8";
+div.DTE div.DTE_Form_Error {
+  color: #b11f1f;
+}
+
+div.modal div.DTE div.DTE_Form_Error {
+  display: none;
+  float: left;
+  padding-top: 7px;
+}
+
+div.DTE_Field {
+  position: relative;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Field div:not([data-dte-e=msg-error]) {
+  color: inherit;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input.form-control {
+  height: 30px;
+}
+div.DTE_Inline div.DTE_Field div.help-block {
+  display: none;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+div.DTE_Inline.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Field_Type_checkbox div.controls,
+div.DTE_Field_Type_radio div.controls {
+  margin-top: 0.4em;
+}
+div.DTE_Field_Type_checkbox div.controls label,
+div.DTE_Field_Type_radio div.controls label {
+  margin-left: 0.75em;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  zoom: 1;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 42px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid black;
+  background-color: #ccc;
+  text-align: center;
+  border-radius: 11px;
+  cursor: pointer;
+  z-index: 12;
+  box-shadow: 2px 2px 6px #111;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover {
+  background-color: #999;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  max-width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+  flex: none;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label {
+  padding: 0 0 4px 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  font-size: 14px;
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  padding-top: 3px;
+  text-align: center;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+  padding-bottom: 5px;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.editor-datetime {
+  position: absolute;
+  background-color: white;
+  z-index: 2050;
+  border: 1px solid #ccc;
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
+  padding: 0 20px 6px 20px;
+  width: 275px;
+}
+div.editor-datetime div.editor-datetime-title {
+  text-align: center;
+  padding: 5px 0px 3px;
+}
+div.editor-datetime table {
+  border-spacing: 0;
+  margin: 12px 0;
+  width: 100%;
+}
+div.editor-datetime table.editor-datetime-table-nospace {
+  margin-top: -12px;
+}
+div.editor-datetime table th {
+  font-size: 0.8em;
+  color: #777;
+  font-weight: normal;
+  width: 14.285714286%;
+  padding: 0 0 4px 0;
+  text-align: center;
+}
+div.editor-datetime table td {
+  font-size: 0.9em;
+  color: #444;
+  padding: 0;
+}
+div.editor-datetime table td.selectable {
+  text-align: center;
+  background: #f5f5f5;
+}
+div.editor-datetime table td.selectable.disabled {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.disabled button:hover {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.now {
+  background-color: #ddd;
+}
+div.editor-datetime table td.selectable.now button {
+  font-weight: bold;
+}
+div.editor-datetime table td.selectable.selected button {
+  background: #0275d8;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.selectable button:hover {
+  background: #ff8000;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.editor-datetime-week {
+  font-size: 0.7em;
+}
+div.editor-datetime table button {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+  padding: 4px 0;
+  cursor: pointer;
+  margin: 0;
+}
+div.editor-datetime table button span {
+  display: inline-block;
+  min-width: 14px;
+  text-align: right;
+}
+div.editor-datetime table.weekNumber th {
+  width: 12.5%;
+}
+div.editor-datetime div.editor-datetime-calendar table {
+  margin-top: 0;
+}
+div.editor-datetime div.editor-datetime-label {
+  position: relative;
+  display: inline-block;
+  height: 30px;
+  padding: 5px 6px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-label:hover {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+}
+div.editor-datetime div.editor-datetime-label select {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  cursor: pointer;
+  opacity: 0;
+  -ms-filter: "alpha(opacity=0)";
+}
+div.editor-datetime.horizontal {
+  width: 550px;
+}
+div.editor-datetime.horizontal div.editor-datetime-date,
+div.editor-datetime.horizontal div.editor-datetime-time {
+  width: 48%;
+}
+div.editor-datetime.horizontal div.editor-datetime-time {
+  margin-left: 4%;
+}
+div.editor-datetime div.editor-datetime-date {
+  position: relative;
+  float: left;
+  width: 100%;
+}
+div.editor-datetime div.editor-datetime-time {
+  position: relative;
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+div.editor-datetime div.editor-datetime-time > span {
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-time th {
+  text-align: left;
+}
+div.editor-datetime div.editor-datetime-time div.editor-datetime-timeblock {
+  display: inline-block;
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-iconLeft,
+div.editor-datetime div.editor-datetime-iconRight,
+div.editor-datetime div.editor-datetime-iconUp,
+div.editor-datetime div.editor-datetime-iconDown {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.3;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+div.editor-datetime div.editor-datetime-iconLeft:hover,
+div.editor-datetime div.editor-datetime-iconRight:hover,
+div.editor-datetime div.editor-datetime-iconUp:hover,
+div.editor-datetime div.editor-datetime-iconDown:hover {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: #f0f0f0;
+  opacity: 0.6;
+}
+div.editor-datetime div.editor-datetime-iconLeft button,
+div.editor-datetime div.editor-datetime-iconRight button,
+div.editor-datetime div.editor-datetime-iconUp button,
+div.editor-datetime div.editor-datetime-iconDown button {
+  border: none;
+  background: transparent;
+  text-indent: 30px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-iconLeft {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
+}
+div.editor-datetime div.editor-datetime-iconRight {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconUp {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconDown {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC");
+}
+
+div.editor-datetime-error {
+  clear: both;
+  padding: 0 1em;
+  max-width: 240px;
+  font-size: 11px;
+  line-height: 1.25em;
+  text-align: center;
+  color: #b11f1f;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 9px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+table.dataTable tbody tr.highlight {
+  background-color: #3399ff !important;
+}
+table.dataTable tbody tr.highlight,
+table.dataTable tbody tr.noHighlight,
+table.dataTable tbody tr.highlight td,
+table.dataTable tbody tr.noHighlight td {
+  -webkit-transition: background-color 500ms linear;
+  -moz-transition: background-color 500ms linear;
+  -ms-transition: background-color 500ms linear;
+  -o-transition: background-color 500ms linear;
+  transition: background-color 500ms linear;
+}
+
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 20px;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 52px;
+  right: 12px;
+}
+
+/*
+ * Namespace: DTED - DataTables Editor Display - Envelope
+ */
+div.DTED_Envelope_Wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  height: 100%;
+  z-index: 11;
+  display: none;
+  overflow: hidden;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Shadow {
+  position: absolute;
+  top: -10px;
+  left: 10px;
+  right: 10px;
+  height: 10px;
+  z-index: 10;
+  box-shadow: 0 0 20px black;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container {
+  position: absolute;
+  top: 0;
+  left: 5%;
+  width: 90%;
+  border-left: 1px solid #777;
+  border-right: 1px solid #777;
+  border-bottom: 1px solid #777;
+  box-shadow: 3px 3px 10px #555;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  background-color: white;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTE_Processing_Indicator {
+  right: 36px;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTE_Footer {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close {
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  z-index: 12;
+  text-align: center;
+  font-size: 12px;
+  background: #F8F8F8;
+  background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
+  background: -moz-linear-gradient(top, white, #CCC);
+  background: linear-gradient(to bottom, white, #CCC);
+  text-shadow: 0 1px 0 white;
+  border: 1px solid #999;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  box-shadow: 0px 0px 1px #999;
+  -moz-box-shadow: 0px 0px 1px #999;
+  -webkit-box-shadow: 0px 0px 1px #999;
+}
+
+div.DTED_Envelope_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.4);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.1)), color-stop(1, rgba(0, 0, 0, 0.4)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+  /* W3C Markup, IE10 Release Preview */
+}
+
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close {
+  top: 10px;
+  background: transparent;
+  text-shadow: none;
+  box-shadow: none;
+  border: none;
+  font-size: 21px;
+  color: black;
+  opacity: 0.2;
+}
+div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close:hover {
+  opacity: 1;
+}
+
+div.card.multi-value,
+div.card.multi-restore {
+  padding: 0.5em;
+}
+div.card.multi-value span,
+div.card.multi-restore span {
+  line-height: 1.2em;
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  margin: 0 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  margin-top: 1em;
+}
+
+div.DTE_Inline div.DTE_Field {
+  width: 100%;
+  margin: 0;
+}
+div.DTE_Inline div.DTE_Field > div {
+  max-width: 100%;
+  flex: none;
+}
+div.DTE_Inline div.DTE_Field input {
+  margin: -5px 0 -10px !important;
+}
+
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
+  max-width: 100%;
+  flex: 0 0 100%;
+}
+
+div.DTE_Field_Type_checkbox div label,
+div.DTE_Field_Type_radio div label {
+  margin-left: 0.75em;
+  vertical-align: middle;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 20px;
+  right: 36px;
+}

editor/css/editor.foundation.css

@@ -0,0 +1,776 @@
+@charset "UTF-8";
+div.DTE div.DTE_Form_Error {
+  display: none;
+  color: #b11f1f;
+}
+
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+  padding: 0.75rem;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #e5e5e5;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+  padding: 0.5rem 0.75rem;
+}
+div.DTE_Field div.label {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+div.DTE_Field div.label:empty {
+  padding: 0;
+  margin: 0;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+div.reveal-modal button.close {
+  position: absolute;
+  top: -1.5em;
+  right: -2.5em;
+}
+div.reveal-modal button.close.close-button {
+  right: 1rem;
+  top: 0.5rem;
+  z-index: 100;
+}
+div.reveal-modal div.DTE_Header {
+  position: relative;
+  top: -0.5em;
+  font-size: 2.05556rem;
+  line-height: 1.4;
+}
+div.reveal-modal div.DTE_Form_Content {
+  width: 75%;
+  margin: 0 auto;
+}
+div.reveal-modal div.DTE_Footer {
+  position: relative;
+  bottom: -0.5em;
+  float: right;
+}
+div.reveal-modal div.DTE_Footer button {
+  margin-bottom: 0;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE_Inline div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Field input {
+  height: 30px;
+  margin-bottom: 0;
+}
+div.DTE_Inline div.DTE_Field div.label:empty {
+  display: none;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  zoom: 1;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 42px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid black;
+  background-color: #ccc;
+  text-align: center;
+  border-radius: 11px;
+  cursor: pointer;
+  z-index: 12;
+  box-shadow: 2px 2px 6px #111;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover {
+  background-color: #999;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  width: 100%;
+  float: none;
+  clear: both;
+  text-align: left;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label {
+  padding-bottom: 4px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  margin-top: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  font-size: 14px;
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  margin-top: -2px;
+  display: block;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  padding-top: 3px;
+  text-align: center;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+  padding-bottom: 5px;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+div.DTE div.editor_upload button.button,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+div.DTE div.editor_upload ul li button {
+  width: 63px;
+}
+
+div.editor-datetime {
+  position: absolute;
+  background-color: white;
+  z-index: 2050;
+  border: 1px solid #ccc;
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
+  padding: 0 20px 6px 20px;
+  width: 275px;
+}
+div.editor-datetime div.editor-datetime-title {
+  text-align: center;
+  padding: 5px 0px 3px;
+}
+div.editor-datetime table {
+  border-spacing: 0;
+  margin: 12px 0;
+  width: 100%;
+}
+div.editor-datetime table.editor-datetime-table-nospace {
+  margin-top: -12px;
+}
+div.editor-datetime table th {
+  font-size: 0.8em;
+  color: #777;
+  font-weight: normal;
+  width: 14.285714286%;
+  padding: 0 0 4px 0;
+  text-align: center;
+}
+div.editor-datetime table td {
+  font-size: 0.9em;
+  color: #444;
+  padding: 0;
+}
+div.editor-datetime table td.selectable {
+  text-align: center;
+  background: #f5f5f5;
+}
+div.editor-datetime table td.selectable.disabled {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.disabled button:hover {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.now {
+  background-color: #ddd;
+}
+div.editor-datetime table td.selectable.now button {
+  font-weight: bold;
+}
+div.editor-datetime table td.selectable.selected button {
+  background: #008CBA;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.selectable button:hover {
+  background: #ff8000;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.editor-datetime-week {
+  font-size: 0.7em;
+}
+div.editor-datetime table button {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+  padding: 4px 0;
+  cursor: pointer;
+  margin: 0;
+}
+div.editor-datetime table button span {
+  display: inline-block;
+  min-width: 14px;
+  text-align: right;
+}
+div.editor-datetime table.weekNumber th {
+  width: 12.5%;
+}
+div.editor-datetime div.editor-datetime-calendar table {
+  margin-top: 0;
+}
+div.editor-datetime div.editor-datetime-label {
+  position: relative;
+  display: inline-block;
+  height: 30px;
+  padding: 5px 6px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-label:hover {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+}
+div.editor-datetime div.editor-datetime-label select {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  cursor: pointer;
+  opacity: 0;
+  -ms-filter: "alpha(opacity=0)";
+}
+div.editor-datetime.horizontal {
+  width: 550px;
+}
+div.editor-datetime.horizontal div.editor-datetime-date,
+div.editor-datetime.horizontal div.editor-datetime-time {
+  width: 48%;
+}
+div.editor-datetime.horizontal div.editor-datetime-time {
+  margin-left: 4%;
+}
+div.editor-datetime div.editor-datetime-date {
+  position: relative;
+  float: left;
+  width: 100%;
+}
+div.editor-datetime div.editor-datetime-time {
+  position: relative;
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+div.editor-datetime div.editor-datetime-time > span {
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-time th {
+  text-align: left;
+}
+div.editor-datetime div.editor-datetime-time div.editor-datetime-timeblock {
+  display: inline-block;
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-iconLeft,
+div.editor-datetime div.editor-datetime-iconRight,
+div.editor-datetime div.editor-datetime-iconUp,
+div.editor-datetime div.editor-datetime-iconDown {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.3;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+div.editor-datetime div.editor-datetime-iconLeft:hover,
+div.editor-datetime div.editor-datetime-iconRight:hover,
+div.editor-datetime div.editor-datetime-iconUp:hover,
+div.editor-datetime div.editor-datetime-iconDown:hover {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: #f0f0f0;
+  opacity: 0.6;
+}
+div.editor-datetime div.editor-datetime-iconLeft button,
+div.editor-datetime div.editor-datetime-iconRight button,
+div.editor-datetime div.editor-datetime-iconUp button,
+div.editor-datetime div.editor-datetime-iconDown button {
+  border: none;
+  background: transparent;
+  text-indent: 30px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-iconLeft {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
+}
+div.editor-datetime div.editor-datetime-iconRight {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconUp {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconDown {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC");
+}
+
+div.editor-datetime-error {
+  clear: both;
+  padding: 0 1em;
+  max-width: 240px;
+  font-size: 11px;
+  line-height: 1.25em;
+  text-align: center;
+  color: #b11f1f;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 9px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 26px;
+  right: 95px;
+}

editor/css/editor.jqueryui.css

@@ -0,0 +1,994 @@
+@charset "UTF-8";
+div.DTE_Field input,
+div.DTE_Field textarea {
+  box-sizing: border-box;
+  background-color: white;
+  -webkit-transition: background-color ease-in-out 0.15s;
+  transition: background-color ease-in-out 0.15s;
+}
+div.DTE_Field input:focus,
+div.DTE_Field textarea:focus {
+  background-color: #ffffee;
+}
+div.DTE_Field input[type=color],
+div.DTE_Field input[type=date],
+div.DTE_Field input[type=datetime],
+div.DTE_Field input[type=datetime-local],
+div.DTE_Field input[type=email],
+div.DTE_Field input[type=month],
+div.DTE_Field input[type=number],
+div.DTE_Field input[type=password],
+div.DTE_Field input[type=search],
+div.DTE_Field input[type=tel],
+div.DTE_Field input[type=text],
+div.DTE_Field input[type=time],
+div.DTE_Field input[type=url],
+div.DTE_Field input[type=week] {
+  padding: 5px 4px;
+  width: 100%;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}
+div.DTE_Field select {
+  padding: 4px;
+  border-radius: 3px;
+  border: 1px solid #aaa;
+  background: white;
+}
+div.DTE_Field label div.DTE_Label_Info {
+  font-size: 0.85em;
+  margin-top: 0.25em;
+}
+div.DTE_Field label div.DTE_Label_Info:empty {
+  margin-top: 0;
+}
+div.DTE_Field div.DTE_Field_Info,
+div.DTE_Field div.DTE_Field_Message,
+div.DTE_Field div.DTE_Field_Error {
+  font-size: 11px;
+  line-height: 1em;
+  margin-top: 5px;
+}
+div.DTE_Field div.DTE_Field_Info:empty,
+div.DTE_Field div.DTE_Field_Message:empty,
+div.DTE_Field div.DTE_Field_Error:empty {
+  margin-top: 0;
+}
+div.DTE_Field div.DTE_Field_Error {
+  display: none;
+  color: #b11f1f;
+}
+div.DTE_Field div.multi-value {
+  display: none;
+  border: 1px dotted #666;
+  border-radius: 3px;
+  padding: 5px;
+  background-color: #fafafa;
+  cursor: pointer;
+}
+div.DTE_Field div.multi-value span {
+  font-size: 0.8em;
+  line-height: 1.25em;
+  display: block;
+  color: #666;
+}
+div.DTE_Field div.multi-value.multi-noEdit {
+  border: 1px solid #ccc;
+  cursor: auto;
+  background-color: #fcfcfc;
+}
+div.DTE_Field div.multi-value.multi-noEdit:hover {
+  background-color: #fcfcfc;
+}
+div.DTE_Field div.multi-value:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field.disabled {
+  color: grey;
+}
+div.DTE_Field.disabled div.multi-value {
+  cursor: default;
+  border: 1px dotted #aaa;
+  background-color: transparent;
+}
+div.DTE_Field div.multi-restore {
+  display: none;
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+  color: #3879d9;
+}
+div.DTE_Field div.multi-restore:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+div.DTE_Field_Type_textarea textarea {
+  padding: 3px;
+  width: 100%;
+  height: 80px;
+  border: 1px solid #aaa;
+}
+
+div.DTE_Field.DTE_Field_Type_date img {
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+div.DTE_Field_Type_checkbox div.DTE_Field_Input > div > div,
+div.DTE_Field_Type_radio div.DTE_Field_Input > div > div {
+  margin-bottom: 0.25em;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field_Input > div > div:last-child,
+div.DTE_Field_Type_radio div.DTE_Field_Input > div > div:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Field_Type_checkbox div.DTE_Field_Input > div > div label,
+div.DTE_Field_Type_radio div.DTE_Field_Input > div > div label {
+  margin-left: 0.75em;
+  vertical-align: middle;
+}
+
+div.DTE_Field_Type_select div.DTE_Field_Input {
+  padding-top: 4px;
+}
+
+div.DTE_Body {
+  padding: 52px 0;
+}
+div.DTE_Body div.DTE_Body_Content {
+  position: relative;
+  overflow: auto;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Form_Info {
+  padding: 1em 1em 0 1em;
+  margin: 0;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+  position: relative;
+  zoom: 1;
+  clear: both;
+  padding: 5px 5%;
+  border: 1px solid transparent;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field:hover {
+  background-color: #f9f9f9;
+  border: 1px solid #f3f3f3;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
+  float: left;
+  width: 40%;
+  padding-top: 6px;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
+  float: right;
+  width: 60%;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.full {
+  padding: 5px 0 5px 5%;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label {
+  width: 30%;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input {
+  width: 70%;
+}
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+  float: none;
+  clear: both;
+  width: 100%;
+}
+
+html[dir=rtl] div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
+  float: right;
+}
+html[dir=rtl] div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
+  float: left;
+}
+html[dir=rtl] div.DTE div.DTE_Form_Buttons button {
+  float: left;
+}
+
+@media only screen and (max-width: 768px) {
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+    padding: 5px 10%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full {
+    padding: 5px 0 5px 10%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label {
+    width: 35.5%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input {
+    width: 64.5%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: 640px) {
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full {
+    padding: 5px 0%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label {
+    width: 40%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input {
+    width: 60%;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: 580px) {
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+    position: relative;
+    zoom: 1;
+    clear: both;
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
+    float: none;
+    width: auto;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full, div.DTE_Body div.DTE_Body_Content div.DTE_Field.block {
+    padding: 5px 0;
+  }
+  div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input, div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > label,
+div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div.DTE_Field_Input {
+    width: 100%;
+  }
+}
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  zoom: 1;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 42px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid black;
+  background-color: #ccc;
+  text-align: center;
+  border-radius: 11px;
+  cursor: pointer;
+  z-index: 12;
+  box-shadow: 2px 2px 6px #111;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover {
+  background-color: #999;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+table.dataTable tbody tr.highlight {
+  background-color: #FFFBCC !important;
+}
+table.dataTable tbody tr.highlight,
+table.dataTable tbody tr.noHighlight,
+table.dataTable tbody tr.highlight td,
+table.dataTable tbody tr.noHighlight td {
+  -webkit-transition: background-color 500ms linear;
+  -moz-transition: background-color 500ms linear;
+  -ms-transition: background-color 500ms linear;
+  -o-transition: background-color 500ms linear;
+  transition: background-color 500ms linear;
+}
+table.dataTable.stripe tbody tr.odd.highlight, table.dataTable.display tbody tr.odd.highlight {
+  background-color: #f9f5c7;
+}
+table.dataTable.hover tbody tr:hover.highlight,
+table.dataTable.hover tbody tr.odd:hover.highlight,
+table.dataTable.hover tbody tr.even:hover.highlight, table.dataTable.display tbody tr:hover.highlight,
+table.dataTable.display tbody tr.odd:hover.highlight,
+table.dataTable.display tbody tr.even:hover.highlight {
+  background-color: #f6f2c5;
+}
+table.dataTable.order-column tbody tr.highlight > .sorting_1,
+table.dataTable.order-column tbody tr.highlight > .sorting_2,
+table.dataTable.order-column tbody tr.highlight > .sorting_3, table.dataTable.display tbody tr.highlight > .sorting_1,
+table.dataTable.display tbody tr.highlight > .sorting_2,
+table.dataTable.display tbody tr.highlight > .sorting_3 {
+  background-color: #faf6c8;
+}
+table.dataTable.display tbody tr.odd.highlight > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.highlight > .sorting_1 {
+  background-color: #f1edc1;
+}
+table.dataTable.display tbody tr.odd.highlight > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.highlight > .sorting_2 {
+  background-color: #f3efc2;
+}
+table.dataTable.display tbody tr.odd.highlight > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.highlight > .sorting_3 {
+  background-color: #f5f1c4;
+}
+table.dataTable.display tbody tr.even.highlight > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.highlight > .sorting_1 {
+  background-color: #faf6c8;
+}
+table.dataTable.display tbody tr.even.highlight > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.highlight > .sorting_2 {
+  background-color: #fcf8ca;
+}
+table.dataTable.display tbody tr.even.highlight > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.highlight > .sorting_3 {
+  background-color: #fefacb;
+}
+table.dataTable.display tbody tr:hover.highlight > .sorting_1,
+table.dataTable.display tbody tr.odd:hover.highlight > .sorting_1,
+table.dataTable.display tbody tr.even:hover.highlight > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.highlight > .sorting_1,
+table.dataTable.order-column.hover tbody tr.odd:hover.highlight > .sorting_1,
+table.dataTable.order-column.hover tbody tr.even:hover.highlight > .sorting_1 {
+  background-color: #eae6bb;
+}
+table.dataTable.display tbody tr:hover.highlight > .sorting_2,
+table.dataTable.display tbody tr.odd:hover.highlight > .sorting_2,
+table.dataTable.display tbody tr.even:hover.highlight > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.highlight > .sorting_2,
+table.dataTable.order-column.hover tbody tr.odd:hover.highlight > .sorting_2,
+table.dataTable.order-column.hover tbody tr.even:hover.highlight > .sorting_2 {
+  background-color: #ece8bd;
+}
+table.dataTable.display tbody tr:hover.highlight > .sorting_3,
+table.dataTable.display tbody tr.odd:hover.highlight > .sorting_3,
+table.dataTable.display tbody tr.even:hover.highlight > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.highlight > .sorting_3,
+table.dataTable.order-column.hover tbody tr.odd:hover.highlight > .sorting_3,
+table.dataTable.order-column.hover tbody tr.even:hover.highlight > .sorting_3 {
+  background-color: #efebbf;
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  padding-top: 3px;
+  text-align: center;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+  padding-bottom: 5px;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+div.editor-datetime {
+  position: absolute;
+  background-color: white;
+  z-index: 2050;
+  border: 1px solid #ccc;
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
+  padding: 0 20px 6px 20px;
+  width: 275px;
+}
+div.editor-datetime div.editor-datetime-title {
+  text-align: center;
+  padding: 5px 0px 3px;
+}
+div.editor-datetime table {
+  border-spacing: 0;
+  margin: 12px 0;
+  width: 100%;
+}
+div.editor-datetime table.editor-datetime-table-nospace {
+  margin-top: -12px;
+}
+div.editor-datetime table th {
+  font-size: 0.8em;
+  color: #777;
+  font-weight: normal;
+  width: 14.285714286%;
+  padding: 0 0 4px 0;
+  text-align: center;
+}
+div.editor-datetime table td {
+  font-size: 0.9em;
+  color: #444;
+  padding: 0;
+}
+div.editor-datetime table td.selectable {
+  text-align: center;
+  background: #f5f5f5;
+}
+div.editor-datetime table td.selectable.disabled {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.disabled button:hover {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.now {
+  background-color: #ddd;
+}
+div.editor-datetime table td.selectable.now button {
+  font-weight: bold;
+}
+div.editor-datetime table td.selectable.selected button {
+  background: #4E6CA3;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.selectable button:hover {
+  background: #ff8000;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.editor-datetime-week {
+  font-size: 0.7em;
+}
+div.editor-datetime table button {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+  padding: 4px 0;
+  cursor: pointer;
+  margin: 0;
+}
+div.editor-datetime table button span {
+  display: inline-block;
+  min-width: 14px;
+  text-align: right;
+}
+div.editor-datetime table.weekNumber th {
+  width: 12.5%;
+}
+div.editor-datetime div.editor-datetime-calendar table {
+  margin-top: 0;
+}
+div.editor-datetime div.editor-datetime-label {
+  position: relative;
+  display: inline-block;
+  height: 30px;
+  padding: 5px 6px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-label:hover {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+}
+div.editor-datetime div.editor-datetime-label select {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  cursor: pointer;
+  opacity: 0;
+  -ms-filter: "alpha(opacity=0)";
+}
+div.editor-datetime.horizontal {
+  width: 550px;
+}
+div.editor-datetime.horizontal div.editor-datetime-date,
+div.editor-datetime.horizontal div.editor-datetime-time {
+  width: 48%;
+}
+div.editor-datetime.horizontal div.editor-datetime-time {
+  margin-left: 4%;
+}
+div.editor-datetime div.editor-datetime-date {
+  position: relative;
+  float: left;
+  width: 100%;
+}
+div.editor-datetime div.editor-datetime-time {
+  position: relative;
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+div.editor-datetime div.editor-datetime-time > span {
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-time th {
+  text-align: left;
+}
+div.editor-datetime div.editor-datetime-time div.editor-datetime-timeblock {
+  display: inline-block;
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-iconLeft,
+div.editor-datetime div.editor-datetime-iconRight,
+div.editor-datetime div.editor-datetime-iconUp,
+div.editor-datetime div.editor-datetime-iconDown {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.3;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+div.editor-datetime div.editor-datetime-iconLeft:hover,
+div.editor-datetime div.editor-datetime-iconRight:hover,
+div.editor-datetime div.editor-datetime-iconUp:hover,
+div.editor-datetime div.editor-datetime-iconDown:hover {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: #f0f0f0;
+  opacity: 0.6;
+}
+div.editor-datetime div.editor-datetime-iconLeft button,
+div.editor-datetime div.editor-datetime-iconRight button,
+div.editor-datetime div.editor-datetime-iconUp button,
+div.editor-datetime div.editor-datetime-iconDown button {
+  border: none;
+  background: transparent;
+  text-indent: 30px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-iconLeft {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
+}
+div.editor-datetime div.editor-datetime-iconRight {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconUp {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconDown {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC");
+}
+
+div.editor-datetime-error {
+  clear: both;
+  padding: 0 1em;
+  max-width: 240px;
+  font-size: 11px;
+  line-height: 1.25em;
+  text-align: center;
+  color: #b11f1f;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 9px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+div.DTE {
+  font-size: 0.91em;
+}
+div.DTE div.DTE_Header {
+  display: none;
+}
+div.DTE div.DTE_Body {
+  padding: 0;
+}
+div.DTE div.DTE_Body div.DTE_Body_Content {
+  overflow: hidden;
+}
+div.DTE div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+  padding: 5px 5%;
+}
+div.DTE div.DTE_Footer {
+  display: none;
+}
+div.DTE div.DTE_Form_Error {
+  padding-top: 1em;
+  color: red;
+  display: none;
+  color: #b11f1f;
+}
+div.DTE div.DTE_Processing_Indicator {
+  top: 12px;
+  right: 2px;
+  font-size: 0.8em;
+}
+div.DTE div.DTE_Form_Buttons {
+  text-align: right;
+  padding: 0;
+}

editor/css/editor.semanticui.css

@@ -0,0 +1,767 @@
+@charset "UTF-8";
+div.DTE div.DTE_Form_Error {
+  display: none;
+  color: #b11f1f;
+}
+div.DTE label {
+  padding-top: 9px !important;
+  align-self: flex-start;
+  justify-content: flex-end;
+}
+div.DTE div.eight.wide.field {
+  flex-direction: column;
+}
+div.DTE div.DTE_Field_InputControl {
+  width: 100%;
+  margin: 0 !important;
+}
+div.DTE div.ui.message:empty {
+  display: none;
+}
+
+div.DTE_Field div.ui.message {
+  width: 100%;
+}
+div.DTE_Field div.multi-value,
+div.DTE_Field div.multi-restore {
+  display: none;
+  cursor: pointer;
+  margin-top: 0;
+}
+div.DTE_Field div.multi-value span,
+div.DTE_Field div.multi-restore span {
+  display: block;
+  color: #666;
+  font-size: 0.85em;
+  line-height: 1.35em;
+}
+div.DTE_Field div.multi-value:hover,
+div.DTE_Field div.multi-restore:hover {
+  background-color: #f1f1f1;
+}
+div.DTE_Field div.multi-restore {
+  margin-top: 0.5em;
+  font-size: 0.8em;
+  line-height: 1.25em;
+}
+div.DTE_Field:after {
+  display: block;
+  content: ".";
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+div.DTE_Inline {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field,
+div.DTE_Inline div.DTE_Inline_Buttons {
+  display: table-cell;
+  vertical-align: middle;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field {
+  padding: 0;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field > label,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field > label {
+  display: none;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=week],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type=week] {
+  width: 100%;
+}
+div.DTE_Inline div.DTE_Inline_Field div.DTE_Form_Buttons button,
+div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
+  margin: -6px 0 -6px 4px;
+  padding: 5px;
+}
+div.DTE_Inline div.DTE_Field input[type=color],
+div.DTE_Inline div.DTE_Field input[type=date],
+div.DTE_Inline div.DTE_Field input[type=datetime],
+div.DTE_Inline div.DTE_Field input[type=datetime-local],
+div.DTE_Inline div.DTE_Field input[type=email],
+div.DTE_Inline div.DTE_Field input[type=month],
+div.DTE_Inline div.DTE_Field input[type=number],
+div.DTE_Inline div.DTE_Field input[type=password],
+div.DTE_Inline div.DTE_Field input[type=search],
+div.DTE_Inline div.DTE_Field input[type=tel],
+div.DTE_Inline div.DTE_Field input[type=text],
+div.DTE_Inline div.DTE_Field input[type=time],
+div.DTE_Inline div.DTE_Field input[type=url],
+div.DTE_Inline div.DTE_Field input[type=week] {
+  margin: -6px 0;
+}
+div.DTE_Inline div.DTE_Field_Error,
+div.DTE_Inline div.DTE_Form_Error {
+  font-size: 11px;
+  line-height: 1.2em;
+  padding: 0;
+  margin-top: 10px;
+}
+div.DTE_Inline div.DTE_Field_Error:empty,
+div.DTE_Inline div.DTE_Form_Error:empty {
+  margin-top: 0;
+}
+
+span.dtr-data div.DTE_Inline {
+  display: inline-table;
+}
+
+div.DTE.DTE_Inline.ui.form label {
+  display: none !important;
+}
+div.DTE.DTE_Inline.ui.form div.DTE_Field {
+  width: 100%;
+  margin: 0 !important;
+}
+div.DTE.DTE_Inline.ui.form div.DTE_Field div.DTE_Field_Input {
+  width: 100% !important;
+  box-sizing: border-box;
+}
+div.DTE.DTE_Inline.ui.form div.DTE_Field > div {
+  width: 100%;
+  padding: 0;
+}
+div.DTE.DTE_Inline.ui.form.DTE_Processing:after {
+  top: 5px;
+}
+
+div.DTE_Bubble {
+  position: absolute;
+  z-index: 11;
+  margin-top: -6px;
+  opacity: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  position: absolute;
+  bottom: 0;
+  border: 1px solid black;
+  width: 300px;
+  margin-left: -150px;
+  background-color: white;
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  border: 1px solid #666;
+  padding: 1em;
+  background: #fcfcfc;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
+  width: 100%;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  position: relative;
+  zoom: 1;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > label {
+  padding-top: 0;
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div input {
+  margin: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  margin-top: 1em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons button {
+  margin-bottom: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Form_Info,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header + div.DTE_Bubble_Table {
+  padding-top: 42px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
+  float: none;
+  display: none;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
+  position: absolute;
+  top: -11px;
+  right: -11px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid black;
+  background-color: #ccc;
+  text-align: center;
+  border-radius: 11px;
+  cursor: pointer;
+  z-index: 12;
+  box-shadow: 2px 2px 6px #111;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
+  content: "×";
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 22px;
+  font-family: "Courier New", Courier, monospace;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover {
+  background-color: #999;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  top: -6px;
+  background-color: white;
+  border: 1px solid #666;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+div.DTE_Bubble.below div.DTE_Bubble_Liner {
+  top: 10px;
+  bottom: auto;
+}
+div.DTE_Bubble.below div.DTE_Bubble_Triangle {
+  top: 4px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+div.DTE_Bubble_Background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  /* Fallback */
+  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* IE10 Consumer Preview */
+  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Firefox */
+  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Opera */
+  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
+  /* Webkit (Safari/Chrome 10) */
+  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* Webkit (Chrome 11+) */
+  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
+  /* W3C Markup, IE10 Release Preview */
+  z-index: 10;
+}
+div.DTE_Bubble_Background > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+div.DTE_Bubble_Background > div:not([dummy]) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled="false");
+}
+
+div.DTE_Bubble {
+  z-index: 1001;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner {
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
+  flex-direction: column;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label,
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
+  justify-content: flex-start;
+  width: 100% !important;
+  float: none;
+  clear: both;
+  text-align: left;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label {
+  padding-bottom: 4px;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:first-child label {
+  padding-top: 0 !important;
+}
+div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
+  text-align: right;
+  padding: 0;
+}
+div.DTE_Bubble div.DTE_Bubble_Triangle {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+div.DTE div.editor_upload {
+  padding-top: 4px;
+}
+div.DTE div.editor_upload div.eu_table {
+  display: table;
+  width: 100%;
+}
+div.DTE div.editor_upload div.row {
+  display: table-row;
+}
+div.DTE div.editor_upload div.cell {
+  display: table-cell;
+  position: relative;
+  width: 50%;
+  vertical-align: top;
+}
+div.DTE div.editor_upload div.cell + div.cell {
+  padding-left: 10px;
+}
+div.DTE div.editor_upload div.row + div.row div.cell {
+  padding-top: 10px;
+}
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  width: 100%;
+  height: 2.3em;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+}
+div.DTE div.editor_upload input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+div.DTE div.editor_upload div.drop {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px dashed #ccc;
+  border-radius: 6px;
+  min-height: 4em;
+  color: #999;
+  padding-top: 3px;
+  text-align: center;
+}
+div.DTE div.editor_upload div.drop.over {
+  border: 3px dashed #111;
+  color: #111;
+}
+div.DTE div.editor_upload div.drop span {
+  max-width: 75%;
+  font-size: 0.85em;
+  line-height: 1em;
+}
+div.DTE div.editor_upload div.rendered img {
+  max-width: 8em;
+  margin: 0 auto;
+}
+div.DTE div.editor_upload.noDrop div.drop {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.row.second {
+  display: none;
+}
+div.DTE div.editor_upload.noDrop div.rendered {
+  margin-top: 10px;
+}
+div.DTE div.editor_upload.noClear div.clearValue button {
+  display: none;
+}
+div.DTE div.editor_upload.multi div.cell {
+  display: block;
+  width: 100%;
+}
+div.DTE div.editor_upload.multi div.cell div.drop {
+  min-height: 0;
+  padding-bottom: 5px;
+}
+div.DTE div.editor_upload.multi div.clearValue {
+  display: none;
+}
+div.DTE div.editor_upload.multi ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+div.DTE div.editor_upload.multi ul li {
+  position: relative;
+  margin-top: 0.5em;
+}
+div.DTE div.editor_upload.multi ul li:first-child {
+  margin-top: 0;
+}
+div.DTE div.editor_upload.multi ul li img {
+  vertical-align: middle;
+}
+div.DTE div.editor_upload.multi ul li button {
+  position: absolute;
+  width: 40px;
+  right: 0;
+  top: 50%;
+  margin-top: -1.5em;
+}
+
+div.DTE div.editor_upload button.btn,
+div.DTE div.editor_upload input[type=file] {
+  height: auto;
+}
+div.DTE div.editor_upload ul li button {
+  padding-bottom: 8px;
+}
+
+div.editor-datetime {
+  position: absolute;
+  background-color: white;
+  z-index: 2050;
+  border: 1px solid #ccc;
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
+  padding: 0 20px 6px 20px;
+  width: 275px;
+}
+div.editor-datetime div.editor-datetime-title {
+  text-align: center;
+  padding: 5px 0px 3px;
+}
+div.editor-datetime table {
+  border-spacing: 0;
+  margin: 12px 0;
+  width: 100%;
+}
+div.editor-datetime table.editor-datetime-table-nospace {
+  margin-top: -12px;
+}
+div.editor-datetime table th {
+  font-size: 0.8em;
+  color: #777;
+  font-weight: normal;
+  width: 14.285714286%;
+  padding: 0 0 4px 0;
+  text-align: center;
+}
+div.editor-datetime table td {
+  font-size: 0.9em;
+  color: #444;
+  padding: 0;
+}
+div.editor-datetime table td.selectable {
+  text-align: center;
+  background: #f5f5f5;
+}
+div.editor-datetime table td.selectable.disabled {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.disabled button:hover {
+  color: #aaa;
+  background: white;
+}
+div.editor-datetime table td.selectable.now {
+  background-color: #ddd;
+}
+div.editor-datetime table td.selectable.now button {
+  font-weight: bold;
+}
+div.editor-datetime table td.selectable.selected button {
+  background: #2185D0;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.selectable button:hover {
+  background: #ff8000;
+  color: white;
+  border-radius: 2px;
+}
+div.editor-datetime table td.editor-datetime-week {
+  font-size: 0.7em;
+}
+div.editor-datetime table button {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-size: inherit;
+  color: inherit;
+  text-align: center;
+  padding: 4px 0;
+  cursor: pointer;
+  margin: 0;
+}
+div.editor-datetime table button span {
+  display: inline-block;
+  min-width: 14px;
+  text-align: right;
+}
+div.editor-datetime table.weekNumber th {
+  width: 12.5%;
+}
+div.editor-datetime div.editor-datetime-calendar table {
+  margin-top: 0;
+}
+div.editor-datetime div.editor-datetime-label {
+  position: relative;
+  display: inline-block;
+  height: 30px;
+  padding: 5px 6px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-label:hover {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+}
+div.editor-datetime div.editor-datetime-label select {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  cursor: pointer;
+  opacity: 0;
+  -ms-filter: "alpha(opacity=0)";
+}
+div.editor-datetime.horizontal {
+  width: 550px;
+}
+div.editor-datetime.horizontal div.editor-datetime-date,
+div.editor-datetime.horizontal div.editor-datetime-time {
+  width: 48%;
+}
+div.editor-datetime.horizontal div.editor-datetime-time {
+  margin-left: 4%;
+}
+div.editor-datetime div.editor-datetime-date {
+  position: relative;
+  float: left;
+  width: 100%;
+}
+div.editor-datetime div.editor-datetime-time {
+  position: relative;
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+div.editor-datetime div.editor-datetime-time > span {
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-time th {
+  text-align: left;
+}
+div.editor-datetime div.editor-datetime-time div.editor-datetime-timeblock {
+  display: inline-block;
+  vertical-align: middle;
+}
+div.editor-datetime div.editor-datetime-iconLeft,
+div.editor-datetime div.editor-datetime-iconRight,
+div.editor-datetime div.editor-datetime-iconUp,
+div.editor-datetime div.editor-datetime-iconDown {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.3;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+div.editor-datetime div.editor-datetime-iconLeft:hover,
+div.editor-datetime div.editor-datetime-iconRight:hover,
+div.editor-datetime div.editor-datetime-iconUp:hover,
+div.editor-datetime div.editor-datetime-iconDown:hover {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: #f0f0f0;
+  opacity: 0.6;
+}
+div.editor-datetime div.editor-datetime-iconLeft button,
+div.editor-datetime div.editor-datetime-iconRight button,
+div.editor-datetime div.editor-datetime-iconUp button,
+div.editor-datetime div.editor-datetime-iconDown button {
+  border: none;
+  background: transparent;
+  text-indent: 30px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+div.editor-datetime div.editor-datetime-iconLeft {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
+}
+div.editor-datetime div.editor-datetime-iconRight {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconUp {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=");
+}
+div.editor-datetime div.editor-datetime-iconDown {
+  height: 20px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC");
+}
+
+div.editor-datetime-error {
+  clear: both;
+  padding: 0 1em;
+  max-width: 240px;
+  font-size: 11px;
+  line-height: 1.25em;
+  text-align: center;
+  color: #b11f1f;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  position: absolute;
+  top: 17px;
+  right: 9px;
+  height: 2em;
+  width: 2em;
+  z-index: 20;
+  font-size: 12px;
+  display: none;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+div.DTE.processing div.DTE_Processing_Indicator {
+  display: block;
+}
+div.DTE.processing div.DTE_Field div.DTE_Processing_Indicator {
+  display: none;
+}
+div.DTE div.DTE_Field div.DTE_Processing_Indicator {
+  top: 13px;
+  right: 0;
+  font-size: 8px;
+}
+div.DTE.DTE_Inline div.DTE_Processing_Indicator {
+  top: 5px;
+  right: 6px;
+  font-size: 6px;
+}
+div.DTE.DTE_Bubble div.DTE_Processing_Indicator {
+  top: 10px;
+  right: 14px;
+  font-size: 8px;
+}
+div.DTE div.DTE_Processing_Indicator span,
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  display: block;
+  background: black;
+  width: 0.5em;
+  height: 1.5em;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+  animation: editorProcessing 0.9s infinite ease-in-out;
+}
+div.DTE div.DTE_Processing_Indicator:before,
+div.DTE div.DTE_Processing_Indicator:after {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+div.DTE div.DTE_Processing_Indicator:before {
+  left: -1em;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+div.DTE div.DTE_Processing_Indicator span {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+div.DTE div.DTE_Processing_Indicator:after {
+  left: 1em;
+}
+@-webkit-keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+@keyframes editorProcessing {
+  0%, 80%, 100% {
+    transform: scale(1, 1);
+  }
+  40% {
+    transform: scale(1, 1.5);
+  }
+}
+
+table.dataTable tbody tr.highlight th,
+table.dataTable tbody tr.highlight td {
+  background-color: #2185D0 !important;
+}
+table.dataTable tbody tr.highlight td,
+table.dataTable tbody tr.noHighlight td {
+  -webkit-transition: background-color 500ms linear;
+  -moz-transition: background-color 500ms linear;
+  -ms-transition: background-color 500ms linear;
+  -o-transition: background-color 500ms linear;
+  transition: background-color 500ms linear;
+}
+
+div.DTE div.DTE_Processing_Indicator {
+  top: 22px;
+  right: 12px;
+}

editor/css/scss/bubble.scss

@@ -0,0 +1,130 @@
+
+// Bubble form editing
+// Very similar to the main form, but attached to a particular node and the
+// form layout is slightly different with the fields container and buttons
+// making up a table of a single row and two columns. This allows the buttons
+// to be removed from the display and under this condition the fields will
+// take up the full width available.
+div.DTE_Bubble {
+	position: absolute;
+	z-index: 11;
+	margin-top: -6px;
+	opacity: 0;
+
+	div.DTE_Bubble_Liner {
+		position: absolute;
+		bottom: 0;
+		border: 1px solid black;
+		width: 300px;
+		margin-left: -150px;
+		background-color: white;
+		box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+		border-radius: 6px;
+		border: 1px solid #666;
+		padding: 1em;
+		background: #fcfcfc;
+		@include box-sizing(border-box);
+
+		div.DTE_Bubble_Table {
+			width: 100%;
+
+			> form {
+				div.DTE_Form_Content {
+					padding: 0;
+
+					div.DTE_Field {
+						position: relative;
+						zoom: 1;
+						margin-bottom: 0.5em;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+
+						> label {
+							padding-top: 0;
+							margin-bottom: 0;
+						}
+
+						> div {
+							padding: 0;
+
+							input {
+								margin: 0;
+							}
+						}
+					}
+				}
+			}
+			
+			div.DTE_Form_Buttons {
+				text-align: right;
+				margin-top: 1em;
+
+				button {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		div.DTE_Header {
+			border-top-left-radius: 5px;
+			border-top-right-radius: 5px;
+		}
+
+		div.DTE_Header + div.DTE_Form_Info,
+		div.DTE_Header + div.DTE_Bubble_Table {
+			padding-top: 42px;
+		}
+
+
+		div.DTE_Form_Error {
+			float: none;
+			display: none;
+			padding: 0;
+			margin-bottom: 0.5em;
+		}
+
+		div.DTE_Bubble_Close {
+			@include close-icon();
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		position: absolute;
+		height: 10px;
+		width: 10px;
+		top: -6px;
+		background-color: white;
+		border: 1px solid #666;
+		border-top: none;
+		border-right: none;
+
+		-webkit-transform: rotate(-45deg);
+		   -moz-transform: rotate(-45deg);
+		    -ms-transform: rotate(-45deg);
+		     -o-transform: rotate(-45deg);
+		        transform: rotate(-45deg);
+	}
+
+	&.below {
+		div.DTE_Bubble_Liner {
+			top: 10px;
+			bottom: auto;
+		}
+
+		div.DTE_Bubble_Triangle {
+			top: 4px;
+			-webkit-transform: rotate(135deg);
+			   -moz-transform: rotate(135deg);
+			    -ms-transform: rotate(135deg);
+			     -o-transform: rotate(135deg);
+			        transform: rotate(135deg);
+		}
+	}
+}
+
+div.DTE_Bubble_Background {
+	@include overlay-background();
+}
+

editor/css/scss/datatable.scss

@@ -0,0 +1,93 @@
+
+// Row highlighting on edit styles
+//
+// To change the colour of the highlight, simply modify the variable below and
+// recompile the SCSS stylesheet (if you don't have SASS installed, you can use
+// the online service at http://sassmeister.com/ .
+//
+// The DataTables styles below match the default DataTables stylesheet:
+// http://next.datatables.net/manual/styling/classes so you can retain the full
+// benefits of the DataTables styling options.
+
+$table-row-highlight: #FFFBCC;
+
+table.dataTable {
+	tbody {
+		tr.highlight {
+			background-color: $table-row-highlight !important;
+		}
+
+		tr.highlight,
+		tr.noHighlight,
+		tr.highlight td,
+		tr.noHighlight td {
+			@include background-transision();
+		}
+	}
+
+	&.stripe tbody,
+	&.display tbody {
+		tr.odd {
+			&.highlight {
+				background-color: shade($table-row-highlight, 2.35%);
+			}
+		}
+	}
+
+	// Hover classes - add "hover" class to the table to activate
+	&.hover tbody,
+	&.display tbody {
+		tr:hover,
+		tr.odd:hover,
+		tr.even:hover {
+			&.highlight {
+				background-color: shade($table-row-highlight, 3.6%);
+			}
+		}
+	}
+
+
+	// Sort column highlighting - add "hover" class to the table to activate
+	&.order-column,
+	&.display {
+		tbody {
+			tr.highlight>.sorting_1,
+			tr.highlight>.sorting_2,
+			tr.highlight>.sorting_3 {
+				background-color: shade($table-row-highlight, 2%);
+			}
+		}
+	}
+
+	&.display tbody,
+	&.order-column.stripe tbody {
+		tr.odd {
+			&.highlight {
+				>.sorting_1 { background-color: shade($table-row-highlight, 5.4%);}
+				>.sorting_2 { background-color: shade($table-row-highlight, 4.7%);}
+				>.sorting_3 { background-color: shade($table-row-highlight, 3.9%);}
+			}
+		}
+
+		tr.even {
+			&.highlight {
+				>.sorting_1 { background-color: shade($table-row-highlight, 2%); }
+				>.sorting_2 { background-color: shade($table-row-highlight, 1.2%); }
+				>.sorting_3 { background-color: shade($table-row-highlight, 0.4%); }
+			}
+		}
+	}
+
+	&.display tbody,
+	&.order-column.hover tbody {
+		tr:hover,
+		tr.odd:hover,
+		tr.even:hover {
+			&.highlight {
+				>.sorting_1 { background-color: shade($table-row-highlight, 8.2%); }
+				>.sorting_2 { background-color: shade($table-row-highlight, 7.5%); }
+				>.sorting_3 { background-color: shade($table-row-highlight, 6.3%); }
+			}
+		}
+	}
+}

editor/css/scss/datetime.scss

@@ -0,0 +1,244 @@
+
+$editor-datetime-selected: #4E6CA3 !default;
+
+div.editor-datetime {
+	position: absolute;
+	background-color: white;
+	z-index: 2050;
+    border: 1px solid #ccc;
+	box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
+	padding: 0 20px 6px 20px;
+	width: 275px;
+
+	div.editor-datetime-title {
+		text-align: center;
+	    padding: 5px 0px 3px;
+	}
+
+	table {
+		border-spacing: 0;
+		margin: 12px 0;
+		width: 100%;
+
+		&.editor-datetime-table-nospace {
+			margin-top: -12px;
+		}
+
+		th {
+			font-size: 0.8em;
+			color: #777;
+			font-weight: normal;
+			width: 14.285714286%;
+			padding: 0 0 4px 0;
+			text-align: center;
+		}
+
+		td {
+			font-size: 0.9em;
+			color: #444;
+			padding: 0;
+		}
+
+		td.selectable {
+			text-align: center;
+			background: #f5f5f5;
+
+			&.disabled {
+				color: #aaa;
+				background: white;
+
+				button:hover {
+					color: #aaa;
+					background: white;
+				}
+			}
+
+			&.now {
+				background-color: #ddd;
+				
+				button {
+					font-weight: bold;
+				}
+			}
+
+			&.selected button {
+				background: $editor-datetime-selected;
+				color: white;
+				border-radius: 2px;
+			}
+
+			button:hover {
+				background: #ff8000;
+				color: white;
+				border-radius: 2px;
+			}
+		}
+
+		td.editor-datetime-week {
+			font-size: 0.7em;
+		}
+
+		button {
+			width: 100%;
+			box-sizing: border-box;
+			border: none;
+			background: transparent;
+			font-size: inherit;
+			color: inherit;
+			text-align: center;
+			padding: 4px 0;
+			cursor: pointer;
+			margin: 0;
+
+			span {
+				display: inline-block;
+				min-width: 14px;
+				text-align: right;
+			}
+		}
+
+		&.weekNumber th {
+			width: 12.5%;
+		}
+	}
+
+	div.editor-datetime-calendar {
+		table {
+			margin-top: 0;
+		}
+	}
+
+	div.editor-datetime-label {
+		position: relative;
+		display: inline-block;
+		height: 30px;
+		padding: 5px 6px;
+		border: 1px solid transparent;
+		box-sizing: border-box;
+		cursor: pointer;
+
+		&:hover {
+			border: 1px solid #ddd;
+			border-radius: 2px;
+			background-color: #f5f5f5;
+		}
+
+		span {
+
+		}
+
+		select {
+			position: absolute;
+			top: 6px;
+			left: 0;
+			cursor: pointer;
+			opacity: 0;
+			-ms-filter: "alpha(opacity=0)";
+		}
+	}
+
+	// JS will only apply this when both date and time are visible
+	&.horizontal {
+		width: 550px;
+
+		div.editor-datetime-date,
+		div.editor-datetime-time {
+			width: 48%;
+		}
+
+		div.editor-datetime-time {
+			margin-left: 4%;
+		}
+	}
+
+	div.editor-datetime-date {
+		position: relative;
+		float: left;
+		width: 100%;
+	}
+
+	div.editor-datetime-time {
+		position: relative;
+		float: left;
+		width: 100%;
+
+		text-align: center;
+
+		> span {
+			vertical-align: middle;
+		}
+
+		th {
+			text-align: left;
+		}
+
+		div.editor-datetime-timeblock {
+			display: inline-block;
+			vertical-align: middle;
+		}
+	}
+
+
+	div.editor-datetime-iconLeft,
+	div.editor-datetime-iconRight,
+	div.editor-datetime-iconUp,
+	div.editor-datetime-iconDown {
+		width: 30px;
+		height: 30px;
+		background-position: center;
+		background-repeat: no-repeat;
+		opacity: 0.3;
+		overflow: hidden;
+		box-sizing: border-box;
+
+		&:hover {
+			border: 1px solid #ccc;
+			border-radius: 2px;
+			background-color: #f0f0f0;
+			opacity: 0.6;
+		}
+
+		button {
+			border: none;
+			background: transparent;
+			text-indent: 30px;
+			height: 100%;
+			width: 100%;
+			cursor: pointer;
+		}
+	}
+
+	div.editor-datetime-iconLeft {
+		position: absolute;
+		top: 5px;
+		left: 5px;
+		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+	}
+
+	div.editor-datetime-iconRight {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+	}
+
+	div.editor-datetime-iconUp {
+		height: 20px;
+		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=');
+	}
+
+	div.editor-datetime-iconDown {
+		height: 20px;
+		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC');
+	}
+}
+
+div.editor-datetime-error {
+	clear: both;
+	padding: 0 1em;
+	max-width: 240px;
+	font-size: 11px;
+	line-height: 1.25em;
+	text-align: center;
+	color: #b11f1f;
+}

editor/css/scss/envelope.scss

@@ -0,0 +1,90 @@
+
+/*
+ * Namespace: DTED - DataTables Editor Display - Envelope
+ */
+
+div.DTED_Envelope_Wrapper {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	height: 100%;
+	z-index: 11;
+	display: none;
+	overflow: hidden;
+
+	// Create a shadow display at the top of the evelope to make it look like it has
+	// come from under the element that it is attached to/ Left and right to give a
+	// slight fade and the two ends
+	div.DTED_Envelope_Shadow {
+		position: absolute;
+		top: -10px;
+		left: 10px;
+		right: 10px;
+		height: 10px;
+		z-index: 10;
+		box-shadow: 0 0 20px black;
+	}
+
+	div.DTED_Envelope_Container {
+		position: absolute;
+		top: 0;
+		left: 5%;
+		width: 90%;
+
+		border-left: 1px solid #777;
+		border-right: 1px solid #777;
+		border-bottom: 1px solid #777;
+		box-shadow: 3px 3px 10px #555;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		background-color: white;
+
+		div.DTE_Processing_Indicator {
+			right: 36px;
+		}
+
+		div.DTE_Footer {
+			border-bottom-left-radius: 5px;
+			border-bottom-right-radius: 5px;
+		}
+
+		div.DTED_Envelope_Close {
+			position: absolute;
+			top: 16px;
+			right: 10px;
+			width: 18px;
+			height: 18px;
+			cursor: pointer;
+			z-index: 12;
+			text-align: center;
+			font-size: 12px;
+
+			background: #F8F8F8;
+			background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
+			background: -moz-linear-gradient(top, white, #CCC);
+			background: linear-gradient(to bottom, white, #CCC);
+			text-shadow: 0 1px 0 white;
+			border: 1px solid #999;
+			border-radius: 2px;
+			-moz-border-radius: 2px;
+			-webkit-border-radius: 2px;
+			box-shadow: 0px 0px 1px #999;
+			-moz-box-shadow: 0px 0px 1px #999;
+			-webkit-box-shadow: 0px 0px 1px #999;
+		}
+	}
+}
+
+
+div.DTED_Envelope_Background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 10;
+	@include radial-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4) );
+}
+
+

editor/css/scss/fields.scss

@@ -0,0 +1,167 @@
+
+
+$input-border: 1px solid #aaa;
+
+// Generic field styling
+div.DTE_Field {
+	input,
+	textarea {
+		box-sizing: border-box;
+		background-color: white;
+		-webkit-transition: background-color ease-in-out .15s;
+		        transition: background-color ease-in-out .15s;
+	}
+
+	input:focus,
+	textarea:focus {
+		background-color: #ffffee; 
+	}
+
+	input[type="color"],
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"] {
+		padding: 5px 4px;
+		width: 100%;
+
+		// Chrome 83 introduces some really ugly borders
+		border: $input-border;
+		border-radius: 3px;
+	}
+
+	select {
+		padding: 4px;
+		border-radius: 3px;
+		border: $input-border;
+		background: white;
+	}
+
+	label div.DTE_Label_Info {
+		font-size: 0.85em;
+		margin-top: 0.25em;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Info,
+	div.DTE_Field_Message,
+	div.DTE_Field_Error {
+		font-size: 11px;
+		line-height: 1em;
+		margin-top: 5px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Error {
+		display: none;
+		color: #b11f1f;
+	}
+
+	div.multi-value {
+		display: none;
+		border: 1px dotted #666;
+		border-radius: 3px;
+		padding: 5px;
+		background-color: #fafafa;
+		cursor: pointer;
+
+		span {
+			font-size: 0.8em;
+			line-height: 1.25em;
+			display: block;
+			color: #666;
+		}
+
+		&.multi-noEdit {
+			border: 1px solid #ccc;
+			cursor: auto;
+			background-color: #fcfcfc;
+
+			&:hover {
+				background-color: #fcfcfc;
+			}
+		}
+
+		&:hover {
+			background-color: #f1f1f1;
+		}
+	}
+
+	&.disabled {
+		color: grey;
+
+		div.multi-value {
+			cursor: default;
+			border: 1px dotted #aaa;
+			background-color: transparent;
+		}
+	}
+
+	div.multi-restore {
+		display: none;
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+		color: #3879d9;
+
+		&:hover {
+			text-decoration: underline;
+			cursor: pointer;
+		}
+	}
+}
+
+// Specific field type styling
+div.DTE_Field_Type_textarea {
+	textarea {
+		padding: 3px;
+		width: 100%;
+		height: 80px;
+		border: $input-border;
+	}
+}
+
+div.DTE_Field.DTE_Field_Type_date {
+	img {
+		vertical-align: middle;
+		cursor: pointer;
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_Input > div > div {
+		margin-bottom: 0.25em;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		input {
+		}
+
+		label {
+			margin-left: 0.75em;
+			vertical-align: middle;
+		}
+	}
+}
+
+div.DTE_Field_Type_select div.DTE_Field_Input {
+	padding-top: 4px;
+}

editor/css/scss/inline.scss

@@ -0,0 +1,79 @@
+
+// Inline form editing
+// Hide the label and allow the field to take the full width
+div.DTE_Inline {
+	position: relative;
+	display: table;
+	width: 100%;
+
+	div.DTE_Inline_Field,
+	div.DTE_Inline_Buttons {
+		display: table-cell;
+		vertical-align: middle;
+
+		div.DTE_Field {
+			padding: 0;
+
+			>label {
+				display: none;
+			}
+
+			input[type="color"],
+			input[type="date"],
+			input[type="datetime"],
+			input[type="datetime-local"],
+			input[type="email"],
+			input[type="month"],
+			input[type="number"],
+			input[type="password"],
+			input[type="search"],
+			input[type="tel"],
+			input[type="text"],
+			input[type="time"],
+			input[type="url"],
+			input[type="week"] {
+				width: 100%;
+			}
+		}
+
+		div.DTE_Form_Buttons button {
+			margin: -6px 0 -6px 4px;
+			padding: 5px;
+		}
+	}
+
+	// Have the input types take up full space, taking into account the cell padding
+	div.DTE_Field input[type="color"],
+	div.DTE_Field input[type="date"],
+	div.DTE_Field input[type="datetime"],
+	div.DTE_Field input[type="datetime-local"],
+	div.DTE_Field input[type="email"],
+	div.DTE_Field input[type="month"],
+	div.DTE_Field input[type="number"],
+	div.DTE_Field input[type="password"],
+	div.DTE_Field input[type="search"],
+	div.DTE_Field input[type="tel"],
+	div.DTE_Field input[type="text"],
+	div.DTE_Field input[type="time"],
+	div.DTE_Field input[type="url"],
+	div.DTE_Field input[type="week"] {
+		margin: -6px 0;
+	}
+
+	div.DTE_Field_Error,
+	div.DTE_Form_Error {
+		font-size: 11px;
+		line-height: 1.2em;
+		padding: 0;
+		margin-top: 10px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+}
+
+// Responsive integration
+span.dtr-data div.DTE_Inline {
+	display: inline-table;
+}

editor/css/scss/lightbox.scss

@@ -0,0 +1,164 @@
+
+
+div.DTED_Lightbox_Wrapper {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	margin-left: -390px;
+	width: 780px;
+	height: 100%;
+	z-index: 11;
+
+	div.DTED_Lightbox_Container {
+		display: table;
+		height: 100%;
+		width: 100%;
+
+		div.DTED_Lightbox_Content_Wrapper {
+			display: table-cell;
+			vertical-align: middle;
+			width: 100%;
+
+			div.DTED_Lightbox_Content {
+				position: relative;
+				box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+				border-radius: 6px;
+				@include box-sizing(border-box);
+
+				div.DTE {
+					background: white;
+					border-radius: 6px;
+					border: 1px solid #666;
+					background: #fcfcfc;
+					@include box-sizing(border-box);
+
+					div.DTE_Header {
+						right: 0;
+						width: auto;
+						border-top-left-radius: 6px;
+						border-top-right-radius: 6px;
+					}
+					
+					div.DTE_Body_Content {
+						box-sizing: border-box;
+						background: #fcfcfc;
+					}
+
+					div.DTE_Footer {
+						right: 0;
+						width: auto;
+						border-bottom-left-radius: 6px;
+						border-bottom-right-radius: 6px;
+					}
+				}
+
+				div.DTED_Lightbox_Close {
+					@include close-icon();
+				}
+			}
+		}
+	}
+}
+
+div.DTED_Lightbox_Wrapper {
+	div.DTE_Footer {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	div.DTE_Footer_Content {
+		display: none;
+	}
+
+	div.DTE.inFormError div.DTE_Footer {
+		justify-content: space-between;
+	}
+}
+
+
+div.DTED_Lightbox_Background {
+	@include overlay-background();
+}
+
+
+body.DTED_Lightbox_Mobile {
+	div.DTED_Lightbox_Background {
+		height: 0;
+	}
+
+	div.DTED_Lightbox_Shown {
+		display: none;
+	}
+
+	div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		width: auto;
+		height: auto;
+		margin-left: 0;
+		-webkit-overflow-scrolling: touch;
+
+		div.DTED_Lightbox_Container {
+			display: block;
+			height: 100%;
+
+			div.DTED_Lightbox_Content_Wrapper {
+				display: block;
+				height: 100%;
+
+				div.DTED_Lightbox_Content {
+					border-radius: 0;
+					box-shadow: none;
+					height: 100% !important;
+
+					div.DTE {
+						border-radius: 0;
+						height: 100%;
+
+						div.DTE_Header {
+							border-top-left-radius: 0;
+							border-top-right-radius: 0;
+						}
+
+						div.DTE_Body_Content {
+							padding-bottom: 52px;
+						}
+
+						div.DTE_Footer {
+							border-bottom-left-radius: 0;
+							border-bottom-right-radius: 0;
+						}
+					}
+
+					div.DTED_Lightbox_Close {
+						top: 11px;
+						right: 15px;
+
+						background-color: transparent;
+						border: none;
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width: 780px) {
+	div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-left: 0;
+	}
+}
+
+
+
+
+

editor/css/scss/main.scss

@@ -0,0 +1,188 @@
+
+
+// The main form.
+// Most of the styles for display of the main form come from the display
+// controller (lightbox and envelope are the two built in options).
+div.DTE_Body {
+	padding: 52px 0; // space for hte header and footer which are position: absolute
+	
+	div.DTE_Body_Content {
+		position: relative;
+		overflow: auto;
+
+		div.DTE_Form_Info {
+			padding: 1em 1em 0 1em;
+			margin: 0;
+		}
+
+		div.DTE_Field {
+			position: relative;
+			zoom: 1;
+			
+			clear: both;
+			padding: 5px 20%;
+			border: 1px solid transparent;
+
+			&:after {
+				display: block;
+				content: ".";
+				height: 0;
+				line-height: 0;
+				clear: both;
+				visibility: hidden;
+			}
+
+			&:hover {
+				background-color: #f9f9f9;
+				border: 1px solid #f3f3f3;
+			}
+
+			>label {
+				float: left;
+				width: 40%;
+				padding-top: 6px;
+			}
+
+			>div.DTE_Field_Input {
+				float: right;
+				width: 60%;
+			}
+
+			// Field in error state
+			&.DTE_Field_StateError { }
+
+			&.full {
+				padding: 5px 0 5px 20%;
+
+				>label {
+					width: 30%;
+				}
+
+				>div.DTE_Field_Input {
+					width: 70%;
+				}
+			}
+
+			&.block {
+				>div.DTE_Field_Input {
+					float: none;
+					clear: both;
+					width: 100%;
+				}
+			}
+		}
+	}
+}
+
+html[dir="rtl"] {
+	div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+		> label {
+			float: right;
+		}
+
+		>div.DTE_Field_Input {
+			float: left;
+		}
+	}
+	
+	div.DTE div.DTE_Form_Buttons button {
+		float: left;
+	}
+}
+
+// iPad in portrait 
+@media only screen 
+and (max-width : 768px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 10%;
+
+				&.full {
+					padding: 5px 0 5px 10%;
+
+					>label {
+						width: 35.5%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 64.5%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width : 640px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 0;
+
+				&.full {
+					padding: 5px 0%;
+
+					>label {
+						width: 40%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 60%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+// For devices with smaller screens, the fields should be shown stacked
+@media only screen 
+and (max-width : 580px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				position: relative;
+				zoom: 1;
+				
+				clear: both;
+				padding: 5px 0;
+
+				>label {
+					float: none;
+					width: auto;
+					padding-top: 0;
+				}
+
+				>div.DTE_Field_Input {
+					float: none;
+					width: auto;
+				}
+
+				&.full,
+				&.block {
+					padding: 5px 0;
+
+					>label,
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+

editor/css/scss/mixins.scss

@@ -0,0 +1,184 @@
+
+
+@function tint( $color, $percent ) {
+	@return mix(white, $color, $percent);
+}
+
+@function shade( $color, $percent ) {
+	@return mix(black, $color, $percent);
+}
+
+
+@mixin border-radius ( $radius ) {
+	-webkit-border-radius: $radius;
+	   -moz-border-radius: $radius;
+	    -ms-border-radius: $radius;
+	     -o-border-radius: $radius;
+	        border-radius: $radius;
+}
+
+@mixin box-sizing($box-model) {
+  -webkit-box-sizing: $box-model; // Safari <= 5
+     -moz-box-sizing: $box-model; // Firefox <= 19
+          box-sizing: $box-model;
+}
+
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow:inset $top $left $blur $color;
+    -moz-box-shadow:inset $top $left $blur $color;
+    box-shadow:inset $top $left $blur $color;
+  } @else {
+    -webkit-box-shadow: $top $left $blur $color;
+    -moz-box-shadow: $top $left $blur $color;
+    box-shadow: $top $left $blur $color;
+  }
+}
+
+@mixin two-stop-gradient($fromColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor 0%, $toColor 100%); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor 0%, $toColor 100%); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor 0%, $toColor 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin three-stop-gradient($fromColor, $middleColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor, $middleColor, $toColor); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor, $middleColor, $toColor); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor, $middleColor, $toColor);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin radial-gradient ($fromColor, $toColor ) {
+	background: $toColor; /* Fallback */
+	background:     -ms-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* IE10 Consumer Preview */ 
+	background:    -moz-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Firefox */ 
+	background:      -o-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Opera */ 
+	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, $fromColor), color-stop(1, $toColor)); /* Webkit (Safari/Chrome 10) */ 
+	background: -webkit-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Webkit (Chrome 11+) */ 
+	background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */ 
+}
+
+@mixin keyframe ($animation_name) {
+    @-webkit-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-moz-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-o-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @keyframes #{$animation_name} {
+        @content;
+    }
+}
+
+@mixin animation ($duration, $animation) {
+	-webkit-animation-duration: $duration;
+	-webkit-animation-name: $animation;
+	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-timing-function: linear;
+	-webkit-animation-direction: alternate;
+
+	-moz-animation-duration: $duration;
+	-moz-animation-name: $animation;
+	-moz-animation-fill-mode: forwards;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-timing-function: linear;
+	-moz-animation-direction: alternate;
+	
+	-o-animation-duration: $duration;
+	-o-animation-name: $animation;
+	-o-animation-fill-mode: forwards;
+	-o-animation-iteration-count: infinite;
+	-o-animation-timing-function: linear;
+	-o-animation-direction: alternate;
+	
+	animation-duration: $duration;
+	animation-name: $animation;
+	animation-fill-mode: forwards;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-direction: alternate;
+}
+
+@mixin close-icon () {
+	position: absolute;
+	top: -11px;
+	right: -11px;
+	width: 22px;
+	height: 22px;
+	border: 1px solid black;
+	background-color: #ccc;
+	text-align: center;
+	border-radius: 11px;
+	cursor: pointer;
+	z-index: 12;
+	box-shadow: 2px 2px 6px #111;
+
+	&:after {
+		content: '\00d7';
+		color: black;
+		font-weight: bold;
+		font-size: 18px;
+		line-height: 22px;
+		font-family: 'Courier New', Courier, monospace;
+	}
+
+	&:hover {
+		background-color: #999;
+	}
+}
+
+@mixin overlay-background () {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	@include radial-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) );
+
+	z-index: 10;
+
+	// IE8- doesn't support RGBA and jQuery uses `filter:` for the fade-in
+	// animation, so we need a child element that is used just for the display
+	>div {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+
+		// IE7-
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+		
+		// IE8
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+	}
+
+	// IE9 has both filter and rgba support, so we need a hack to disable the filter
+	>div:not([dummy]) {
+		filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
+	}
+}
+
+@mixin background-transision () {
+	-webkit-transition: background-color 500ms linear;
+	   -moz-transition: background-color 500ms linear;
+	    -ms-transition: background-color 500ms linear;
+	     -o-transition: background-color 500ms linear;
+	transition: background-color 500ms linear;
+}
+

editor/css/scss/processing.scss

@@ -0,0 +1,106 @@
+
+div.DTE {
+	div.DTE_Processing_Indicator {
+		position: absolute;
+		top: 17px;
+		right: 9px;
+		height: 2em;
+		width: 2em;
+		z-index: 20;
+		font-size: 12px;
+		display: none;
+
+		-webkit-transform: translateZ(0);
+		-ms-transform: translateZ(0);
+		transform: translateZ(0);
+	}
+
+	&.processing {
+		div.DTE_Processing_Indicator {
+			display: block;
+		}
+
+		div.DTE_Field div.DTE_Processing_Indicator {
+			display: none;
+		}
+	}
+
+	div.DTE_Field div.DTE_Processing_Indicator {
+		top: 13px;
+		right: 0;
+		font-size: 8px;
+	}
+
+	&.DTE_Inline {
+		div.DTE_Processing_Indicator {
+			top: 5px;
+			right: 6px;
+			font-size: 6px;
+		}
+	}
+
+	&.DTE_Bubble {
+		div.DTE_Processing_Indicator {
+			top: 10px;
+			right: 14px;
+			font-size: 8px;
+		}
+	}
+
+	div.DTE_Processing_Indicator span,
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		display: block;
+		background: black;
+		width: 0.5em;
+		height: 1.5em;
+		border: 1px solid rgba( 0, 0, 0, 0.4 );
+		background-color: rgba( 0, 0, 0, 0.1 );
+
+		-webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+		animation: editorProcessing 0.9s infinite ease-in-out;
+	}
+	
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		position: absolute;
+		top: 0;
+		content: '';
+	}
+	
+	div.DTE_Processing_Indicator:before {
+		left: -1em;
+		-webkit-animation-delay: -0.3s;
+		animation-delay: -0.3s;
+	}
+
+	div.DTE_Processing_Indicator span {
+		-webkit-animation-delay: -0.15s;
+		animation-delay: -0.15s;
+	}
+	
+	div.DTE_Processing_Indicator:after {
+		left: 1em;
+	}
+
+	@-webkit-keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+			transform: scale(1, 1.5);
+		}
+	}
+	@keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+		 transform: scale(1, 1.5);
+		}
+	}
+}

editor/css/scss/upload.scss

@@ -0,0 +1,142 @@
+
+div.DTE div.editor_upload {
+	padding-top: 4px;
+
+	div.eu_table {
+		display: table;
+		width: 100%;
+	}
+
+	div.row {
+		display: table-row;
+	}
+
+	div.cell {
+		display: table-cell;
+		position: relative;
+		width: 50%;
+		vertical-align: top;
+	}
+
+	div.cell + div.cell {
+		padding-left: 10px;
+	}
+
+	div.row + div.row {
+		div.cell {
+			padding-top: 10px;
+		}
+	}
+
+	button.btn,
+	input[type=file] {
+		width: 100%;
+		height: 2.3em;
+		font-size: 0.8em;
+		text-align: center;
+		line-height: 1em;
+	}
+
+	input[type=file] {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		opacity: 0;
+	}
+
+	div.drop {
+		position: relative;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		border: 3px dashed #ccc;
+		border-radius: 6px;
+		min-height: 4em;
+		color: #999;
+		padding-top: 3px;
+		text-align: center;
+
+		&.over {
+			border: 3px dashed #111;
+			color: #111;
+		}
+
+		span {
+			max-width: 75%;
+			font-size: 0.85em;
+			line-height: 1em;
+		}
+	}
+
+	div.rendered {
+		img {
+			max-width: 8em;
+			margin: 0 auto;
+		}
+	}
+
+	&.noDrop {
+		div.drop {
+			display: none;
+		}
+
+		div.row.second {
+			display: none;
+		}
+
+		div.rendered {
+			margin-top: 10px;
+		}
+	}
+
+	&.noClear {
+		div.clearValue button {
+			display: none;
+		}
+	}
+
+	&.multi {
+		div.cell {
+			display: block;
+			width: 100%;
+
+			div.drop {
+				min-height: 0;
+				padding-bottom: 5px;
+			}
+		}
+
+		div.clearValue {
+			display: none;
+		}
+
+		ul {
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+
+			li {
+				position: relative;
+				margin-top: 0.5em;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				img {
+					vertical-align: middle;
+				}
+
+				button {
+					position: absolute;
+					width: 40px;
+					right: 0;
+					top: 50%;
+					margin-top: -1.5em;
+				}
+			}
+		}
+	}
+}
+

editor/examples/advanced/REST.html

@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - REST interface</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: {
+			create: {
+				type: 'POST',
+				url:  '../../controllers/rest/create.php'
+			},
+			edit: {
+				type: 'PUT',
+				url:  '../../controllers/rest/edit.php'
+			},
+			remove: {
+				type: 'DELETE',
+				url:  '../../controllers/rest/remove.php'
+			}
+		},
+		table: "#example",
+		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"
+			}, {
+				label: "Salary:",
+				name: "salary"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/rest/get.php",
+		columns: [
+			{ 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: "extn" },
+			{ data: "start_date" },
+			{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>REST interface</span></h1>
+			<div class="info">
+				<p>REST interfaces are popular in CRUD applications as it provides a clean and well defined interface between the client and server. Editor can be fully integrated
+				with a REST environment through its ability to specify different URLs for the create, edit and remove actions of Editor. This is done by giving <a href=
+				"//editor.datatables.net/reference/option/ajax"><code class="option" title="Editor initialisation option">ajax</code></a> as an object with the
+				<code>create</code>, <code>edit</code> and <code>remove</code> properties specified with the URL to use for each action, as shown in this example.</p>
+				<p>In addition to being able to specify a unique URL for each action, you can also specify full jQuery Ajax options for each action by giving the Ajax properties
+				as an object. In this example the <code>type</code> option is used to specify the HTTP method to be used for each action, as REST interfaces typically require.
+				Note also that the server returns a <em>400 Bad request</em> response to invalid data, which is correctly handled by Editor.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: {
+			create: {
+				type: 'POST',
+				url:  '../../controllers/rest/create.php'
+			},
+			edit: {
+				type: 'PUT',
+				url:  '../../controllers/rest/edit.php'
+			},
+			remove: {
+				type: 'DELETE',
+				url:  '../../controllers/rest/remove.php'
+			}
+		},
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Position:&quot;,
+				name: &quot;position&quot;
+			}, {
+				label: &quot;Office:&quot;,
+				name: &quot;office&quot;
+			}, {
+				label: &quot;Extension:&quot;,
+				name: &quot;extn&quot;
+			}, {
+				label: &quot;Start date:&quot;,
+				name: &quot;start_date&quot;
+			}, {
+				label: &quot;Salary:&quot;,
+				name: &quot;salary&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/rest/get.php&quot;,
+		columns: [
+			{ 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: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;extn&quot; },
+			{ data: &quot;start_date&quot; },
+			{ data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li class="active">
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/compoundKey.html

@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Compound database primary key</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/compoundKey.php',
+		table: '#example',
+		fields: [ {
+				label: 'Staff member:',
+				name: 'users_visits.user_id',
+				type: 'select'
+			}, {
+				label: 'Visiting site:',
+				name: 'users_visits.site_id',
+				type: 'select'
+			}, {
+				label: 'Date:',
+				name: 'users_visits.visit_date',
+				type: 'datetime'
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: 'Bfrtip',
+		ajax: {
+			url: '../../controllers/compoundKey.php',
+			type: 'POST'
+		},
+		columns: [
+			{ data: null, render: function ( data, type, row ) {
+				return data.users.first_name+' '+data.users.last_name;
+			} },
+			{ data: 'sites.name' },
+			{ data: 'users_visits.visit_date' }
+		],
+		select: true,
+		buttons: [
+			{ extend: 'create', editor: editor },
+			{ extend: 'edit',   editor: editor },
+			{ extend: 'remove', editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Compound database primary key</span></h1>
+			<div class="info">
+				<p>Editor's PHP, .NET and NodeJS server-side libraries support the use of <a href="https://en.wikipedia.org/wiki/Compound_key">compound keys</a> (as of v1.6). On
+				the client-side no special configuration is required, while on the server-side you simply need to use an array as the optional third parameter for the
+				<code>Editor</code> class constructor with the column names that make up the primary key.</p>
+				<p>It is important to note that when designing a form that uses a compound key, the data that makes up the primary key must either be included in the form, or
+				generated in the server-side script. It cannot currently use data generated by the database.</p>
+				<p>In this example the staff member id and the date make up the compound primary key for the <code>users_vists</code> database table.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Site</th>
+							<th>Visit date</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Name</th>
+							<th>Site</th>
+							<th>Visit date</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">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/compoundKey.php',
+		table: '#example',
+		fields: [ {
+				label: 'Staff member:',
+				name: 'users_visits.user_id',
+				type: 'select'
+			}, {
+				label: 'Visiting site:',
+				name: 'users_visits.site_id',
+				type: 'select'
+			}, {
+				label: 'Date:',
+				name: 'users_visits.visit_date',
+				type: 'datetime'
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: 'Bfrtip',
+		ajax: {
+			url: '../../controllers/compoundKey.php',
+			type: 'POST'
+		},
+		columns: [
+			{ data: null, render: function ( data, type, row ) {
+				return data.users.first_name+' '+data.users.last_name;
+			} },
+			{ data: 'sites.name' },
+			{ data: 'users_visits.visit_date' }
+		],
+		select: true,
+		buttons: [
+			{ extend: 'create', editor: editor },
+			{ extend: 'edit',   editor: editor },
+			{ extend: 'remove', editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li class="active">
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/deepObjects.html

@@ -0,0 +1,594 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Complex (nested) JSON data source</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/join.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name: "users.first_name"
+			}, {
+				label: "Last name:",
+				name: "users.last_name"
+			}, {
+				label: "Phone #:",
+				name: "users.phone"
+			}, {
+				label: "Site:",
+				name: "users.site",
+				type: "select"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: {
+			url: "../../controllers/join.php",
+			type: 'POST'
+		},
+		columns: [
+			{ data: "users.first_name" },
+			{ data: "users.last_name" },
+			{ data: "users.phone" },
+			{ data: "sites.name" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Complex (nested) JSON data source</span></h1>
+			<div class="info">
+				<p>Like DataTables, Editor has the ability to work with virtually any JSON data source. In DataTables the <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option is used to specify
+				the property name for the row's data source object that should be used for a columns' data. In Editor the <a href=
+				"//editor.datatables.net/reference/option/fields.name"><code class="option" title="Editor initialisation option">fields.name</code></a> and <a href=
+				"//editor.datatables.net/reference/option/fields.data"><code class="option" title="Editor initialisation option">fields.data</code></a> options can be used to tell
+				Editor where to read a field's value from and where to send it on the server.</p>
+				<p>To clarify the difference between <a href="//editor.datatables.net/reference/option/fields.data"><code class="option" title=
+				"Editor initialisation option">fields.data</code></a> and <a href="//editor.datatables.net/reference/option/fields.name"><code class="option" title=
+				"Editor initialisation option">fields.name</code></a>, the former is used to read the value from the DataTables row's data, while the latter is the name of the
+				field that is submitted to the server. Typically they will be the same, with the data property taking the value of the name automatically unless otherwise
+				specified.</p>
+				<p>This example uses data from the server in the structure:</p>
+				<pre><code class="multiline language-js">{
+	"DT_RowId": "row_1",
+	"users": {
+		"first_name": "Quynn",
+		"last_name": "Contreras",
+		"phone": "1-971-977-4681",
+		"site": "1"
+	},
+	"sites": {
+		"name": "Edinburgh"
+	}
+}
+</code></pre>
+				<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a>, <a href=
+				"//editor.datatables.net/reference/option/fields.data"><code class="option" title="Editor initialisation option">fields.data</code></a> and <a href=
+				"//editor.datatables.net/reference/option/fields.name"><code class="option" title="Editor initialisation option">fields.name</code></a> options can be given as
+				Javascript dotted object notation strings, to be able to read the data required. For example, to get the first name parameter from the above data source object,
+				use <code>users.first_name</code> as is done in the Editor initialisation in this example.</p>
+				<p>This can be exceptionally useful when working with <a href="../simple/join.html">joined tables</a>.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/join.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;users.first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;users.last_name&quot;
+			}, {
+				label: &quot;Phone #:&quot;,
+				name: &quot;users.phone&quot;
+			}, {
+				label: &quot;Site:&quot;,
+				name: &quot;users.site&quot;,
+				type: &quot;select&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: {
+			url: &quot;../../controllers/join.php&quot;,
+			type: 'POST'
+		},
+		columns: [
+			{ data: &quot;users.first_name&quot; },
+			{ data: &quot;users.last_name&quot; },
+			{ data: &quot;users.phone&quot; },
+			{ data: &quot;sites.name&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li class="active">
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/formOnlyData.html

@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Data shown only in the form</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/staff.php",
+		"table": "#example",
+		"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"
+			}, {
+				"label": "Salary:",
+				"name": "salary"
+			}, {
+				"label": "Age:",
+				"name": "age"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/staff.php",
+		columns: [
+			{ 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, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Data shown only in the form</span></h1>
+			<div class="info">
+				<p>It can often be useful to have more information available in your form than you show in your table. For example, the table could show a summary while the form,
+				with more screen real estate available to it, can show detailed information. This is readily done with DataTables and Editor through the fact that DataTables can
+				use objects as a data source, and the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> option is used to specify which object properties are required for each column. The data objects provide
+				all the information needed for both the form and table, but only a limited selection of the available properties are actually used in the table, while the form
+				makes full use of the whole object.</p>
+				<p>This example (which is of course grossly simplified) shows four fields only in the table, while the form provides editing abilities for eight different
+				fields.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		&quot;ajax&quot;: &quot;../../controllers/staff.php&quot;,
+		&quot;table&quot;: &quot;#example&quot;,
+		&quot;fields&quot;: [ {
+				&quot;label&quot;: &quot;First name:&quot;,
+				&quot;name&quot;: &quot;first_name&quot;
+			}, {
+				&quot;label&quot;: &quot;Last name:&quot;,
+				&quot;name&quot;: &quot;last_name&quot;
+			}, {
+				&quot;label&quot;: &quot;Position:&quot;,
+				&quot;name&quot;: &quot;position&quot;
+			}, {
+				&quot;label&quot;: &quot;Office:&quot;,
+				&quot;name&quot;: &quot;office&quot;
+			}, {
+				&quot;label&quot;: &quot;Extension:&quot;,
+				&quot;name&quot;: &quot;extn&quot;
+			}, {
+				&quot;label&quot;: &quot;Start date:&quot;,
+				&quot;name&quot;: &quot;start_date&quot;
+			}, {
+				&quot;label&quot;: &quot;Salary:&quot;,
+				&quot;name&quot;: &quot;salary&quot;
+			}, {
+				&quot;label&quot;: &quot;Age:&quot;,
+				&quot;name&quot;: &quot;age&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/staff.php&quot;,
+		columns: [
+			{ 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: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li class="active">
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/htmlTable.html

@@ -0,0 +1,978 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - DOM sourced table</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/staff-html.php',
+		table: '#example',
+		fields: [ {
+				label: "First name:",
+				name: "first_name"
+			}, {
+				label: "Last name:",
+				name: "last_name"
+			}, {
+				label: "Position:",
+				name: "position"
+			}, {
+				label: "Office:",
+				name: "office"
+			}, {
+				label: "Salary:",
+				name: "salary",
+				data: function (row, type, val) {
+					// Strip the formatting from the salary number
+					if ( type === 'set' ) {
+						row.salary = val;
+					}
+					return row.salary.replace(/[^0-9]/g, '');
+				}
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: 'Bfrtip',
+		columns: [
+			{ data: "first_name" },
+			{ data: "last_name" },
+			{ data: "position" },
+			{ data: "office" },
+			{ data: "salary" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>DOM sourced table</span></h1>
+			<div class="info">
+				<p>Although many of the Editor examples show the data for the table being loaded by Ajax (<a href="//datatables.net/reference/option/ajax"><code class="option"
+				title="DataTables initialisation option">ajax</code></a>) this is by no means mandatory. Editor will work with any data source that DataTables can use, with the
+				only additional requirement that each row has a unique ID (allowing the server to identify which rows to update, delete, etc).</p>
+				<p>This example shows Editor being applied to a plain HTML table (generated from the database, although it could come from absolutely anywhere). Ajax requests are
+				still used for create, edit and remove actions, but not for loading the initial data.</p>
+				<p>This example uses DataTables ability to read DOM source tables into a JSON object data store, with the keys specified by <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a>. This makes working with the
+				data in the table very easy since it is named object parameters rather than arrays where indexes must be used. Please note that this feature requires <span class=
+				"since">DataTables 1.10.8</span> or newer.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr id="row_1">
+							<td>Tiger</td>
+							<td>Nixon</td>
+							<td>System Architect</td>
+							<td>Edinburgh</td>
+							<td>$320,800</td>
+						</tr>
+						<tr id="row_2">
+							<td>Garrett</td>
+							<td>Winters</td>
+							<td>Accountant</td>
+							<td>Tokyo</td>
+							<td>$170,750</td>
+						</tr>
+						<tr id="row_3">
+							<td>Ashton</td>
+							<td>Cox</td>
+							<td>Junior Technical Author</td>
+							<td>San Francisco</td>
+							<td>$86,000</td>
+						</tr>
+						<tr id="row_4">
+							<td>Cedric</td>
+							<td>Kelly</td>
+							<td>Senior Javascript Developer</td>
+							<td>Edinburgh</td>
+							<td>$433,060</td>
+						</tr>
+						<tr id="row_5">
+							<td>Airi</td>
+							<td>Satou</td>
+							<td>Accountant</td>
+							<td>Tokyo</td>
+							<td>$162,700</td>
+						</tr>
+						<tr id="row_6">
+							<td>Brielle</td>
+							<td>Williamson</td>
+							<td>Integration Specialist</td>
+							<td>New York</td>
+							<td>$372,000</td>
+						</tr>
+						<tr id="row_7">
+							<td>Herrod</td>
+							<td>Chandler</td>
+							<td>Sales Assistant</td>
+							<td>San Francisco</td>
+							<td>$137,500</td>
+						</tr>
+						<tr id="row_8">
+							<td>Rhona</td>
+							<td>Davidson</td>
+							<td>Integration Specialist</td>
+							<td>Tokyo</td>
+							<td>$327,900</td>
+						</tr>
+						<tr id="row_9">
+							<td>Colleen</td>
+							<td>Hurst</td>
+							<td>Javascript Developer</td>
+							<td>San Francisco</td>
+							<td>$205,500</td>
+						</tr>
+						<tr id="row_10">
+							<td>Sonya</td>
+							<td>Frost</td>
+							<td>Software Engineer</td>
+							<td>Edinburgh</td>
+							<td>$103,600</td>
+						</tr>
+						<tr id="row_11">
+							<td>Jena</td>
+							<td>Gaines</td>
+							<td>Office Manager</td>
+							<td>London</td>
+							<td>$90,560</td>
+						</tr>
+						<tr id="row_12">
+							<td>Quinn</td>
+							<td>Flynn</td>
+							<td>Support Lead</td>
+							<td>Edinburgh</td>
+							<td>$342,000</td>
+						</tr>
+						<tr id="row_13">
+							<td>Charde</td>
+							<td>Marshall</td>
+							<td>Regional Director</td>
+							<td>San Francisco</td>
+							<td>$470,600</td>
+						</tr>
+						<tr id="row_14">
+							<td>Haley</td>
+							<td>Kennedy</td>
+							<td>Senior Marketing Designer</td>
+							<td>London</td>
+							<td>$313,500</td>
+						</tr>
+						<tr id="row_15">
+							<td>Tatyana</td>
+							<td>Fitzpatrick</td>
+							<td>Regional Director</td>
+							<td>London</td>
+							<td>$385,750</td>
+						</tr>
+						<tr id="row_16">
+							<td>Michael</td>
+							<td>Silva</td>
+							<td>Marketing Designer</td>
+							<td>London</td>
+							<td>$198,500</td>
+						</tr>
+						<tr id="row_17">
+							<td>Paul</td>
+							<td>Byrd</td>
+							<td>Chief Financial Officer (CFO)</td>
+							<td>New York</td>
+							<td>$725,000</td>
+						</tr>
+						<tr id="row_18">
+							<td>Gloria</td>
+							<td>Little</td>
+							<td>Systems Administrator</td>
+							<td>New York</td>
+							<td>$237,500</td>
+						</tr>
+						<tr id="row_19">
+							<td>Bradley</td>
+							<td>Greer</td>
+							<td>Software Engineer</td>
+							<td>London</td>
+							<td>$132,000</td>
+						</tr>
+						<tr id="row_20">
+							<td>Dai</td>
+							<td>Rios</td>
+							<td>Personnel Lead</td>
+							<td>Edinburgh</td>
+							<td>$217,500</td>
+						</tr>
+						<tr id="row_21">
+							<td>Jenette</td>
+							<td>Caldwell</td>
+							<td>Development Lead</td>
+							<td>New York</td>
+							<td>$345,000</td>
+						</tr>
+						<tr id="row_22">
+							<td>Yuri</td>
+							<td>Berry</td>
+							<td>Chief Marketing Officer (CMO)</td>
+							<td>New York</td>
+							<td>$675,000</td>
+						</tr>
+						<tr id="row_23">
+							<td>Caesar</td>
+							<td>Vance</td>
+							<td>Pre-Sales Support</td>
+							<td>New York</td>
+							<td>$106,450</td>
+						</tr>
+						<tr id="row_24">
+							<td>Doris</td>
+							<td>Wilder</td>
+							<td>Sales Assistant</td>
+							<td>Sydney</td>
+							<td>$85,600</td>
+						</tr>
+						<tr id="row_25">
+							<td>Angelica</td>
+							<td>Ramos</td>
+							<td>Chief Executive Officer (CEO)</td>
+							<td>London</td>
+							<td>$1,200,000</td>
+						</tr>
+						<tr id="row_26">
+							<td>Gavin</td>
+							<td>Joyce</td>
+							<td>Developer</td>
+							<td>Edinburgh</td>
+							<td>$92,575</td>
+						</tr>
+						<tr id="row_27">
+							<td>Jennifer</td>
+							<td>Chang</td>
+							<td>Regional Director</td>
+							<td>Singapore</td>
+							<td>$357,650</td>
+						</tr>
+						<tr id="row_28">
+							<td>Brenden</td>
+							<td>Wagner</td>
+							<td>Software Engineer</td>
+							<td>San Francisco</td>
+							<td>$206,850</td>
+						</tr>
+						<tr id="row_29">
+							<td>Fiona</td>
+							<td>Green</td>
+							<td>Chief Operating Officer (COO)</td>
+							<td>San Francisco</td>
+							<td>$850,000</td>
+						</tr>
+						<tr id="row_30">
+							<td>Shou</td>
+							<td>Itou</td>
+							<td>Regional Marketing</td>
+							<td>Tokyo</td>
+							<td>$163,000</td>
+						</tr>
+						<tr id="row_31">
+							<td>Michelle</td>
+							<td>House</td>
+							<td>Integration Specialist</td>
+							<td>Sydney</td>
+							<td>$95,400</td>
+						</tr>
+						<tr id="row_32">
+							<td>Suki</td>
+							<td>Burks</td>
+							<td>Developer</td>
+							<td>London</td>
+							<td>$114,500</td>
+						</tr>
+						<tr id="row_33">
+							<td>Prescott</td>
+							<td>Bartlett</td>
+							<td>Technical Author</td>
+							<td>London</td>
+							<td>$145,000</td>
+						</tr>
+						<tr id="row_34">
+							<td>Gavin</td>
+							<td>Cortez</td>
+							<td>Team Leader</td>
+							<td>San Francisco</td>
+							<td>$235,500</td>
+						</tr>
+						<tr id="row_35">
+							<td>Martena</td>
+							<td>Mccray</td>
+							<td>Post-Sales support</td>
+							<td>Edinburgh</td>
+							<td>$324,050</td>
+						</tr>
+						<tr id="row_36">
+							<td>Unity</td>
+							<td>Butler</td>
+							<td>Marketing Designer</td>
+							<td>San Francisco</td>
+							<td>$85,675</td>
+						</tr>
+						<tr id="row_37">
+							<td>Howard</td>
+							<td>Hatfield</td>
+							<td>Office Manager</td>
+							<td>San Francisco</td>
+							<td>$164,500</td>
+						</tr>
+						<tr id="row_38">
+							<td>Hope</td>
+							<td>Fuentes</td>
+							<td>Secretary</td>
+							<td>San Francisco</td>
+							<td>$109,850</td>
+						</tr>
+						<tr id="row_39">
+							<td>Vivian</td>
+							<td>Harrell</td>
+							<td>Financial Controller</td>
+							<td>San Francisco</td>
+							<td>$452,500</td>
+						</tr>
+						<tr id="row_40">
+							<td>Timothy</td>
+							<td>Mooney</td>
+							<td>Office Manager</td>
+							<td>London</td>
+							<td>$136,200</td>
+						</tr>
+						<tr id="row_41">
+							<td>Jackson</td>
+							<td>Bradshaw</td>
+							<td>Director</td>
+							<td>New York</td>
+							<td>$645,750</td>
+						</tr>
+						<tr id="row_42">
+							<td>Olivia</td>
+							<td>Liang</td>
+							<td>Support Engineer</td>
+							<td>Singapore</td>
+							<td>$234,500</td>
+						</tr>
+						<tr id="row_43">
+							<td>Bruno</td>
+							<td>Nash</td>
+							<td>Software Engineer</td>
+							<td>London</td>
+							<td>$163,500</td>
+						</tr>
+						<tr id="row_44">
+							<td>Sakura</td>
+							<td>Yamamoto</td>
+							<td>Support Engineer</td>
+							<td>Tokyo</td>
+							<td>$139,575</td>
+						</tr>
+						<tr id="row_45">
+							<td>Thor</td>
+							<td>Walton</td>
+							<td>Developer</td>
+							<td>New York</td>
+							<td>$98,540</td>
+						</tr>
+						<tr id="row_46">
+							<td>Finn</td>
+							<td>Camacho</td>
+							<td>Support Engineer</td>
+							<td>San Francisco</td>
+							<td>$87,500</td>
+						</tr>
+						<tr id="row_47">
+							<td>Serge</td>
+							<td>Baldwin</td>
+							<td>Data Coordinator</td>
+							<td>Singapore</td>
+							<td>$138,575</td>
+						</tr>
+						<tr id="row_48">
+							<td>Zenaida</td>
+							<td>Frank</td>
+							<td>Software Engineer</td>
+							<td>New York</td>
+							<td>$125,250</td>
+						</tr>
+						<tr id="row_49">
+							<td>Zorita</td>
+							<td>Serrano</td>
+							<td>Software Engineer</td>
+							<td>San Francisco</td>
+							<td>$115,000</td>
+						</tr>
+						<tr id="row_50">
+							<td>Jennifer</td>
+							<td>Acosta</td>
+							<td>Junior Javascript Developer</td>
+							<td>Edinburgh</td>
+							<td>$75,650</td>
+						</tr>
+						<tr id="row_51">
+							<td>Cara</td>
+							<td>Stevens</td>
+							<td>Sales Assistant</td>
+							<td>New York</td>
+							<td>$145,600</td>
+						</tr>
+						<tr id="row_52">
+							<td>Hermione</td>
+							<td>Butler</td>
+							<td>Regional Director</td>
+							<td>London</td>
+							<td>$356,250</td>
+						</tr>
+						<tr id="row_53">
+							<td>Lael</td>
+							<td>Greer</td>
+							<td>Systems Administrator</td>
+							<td>London</td>
+							<td>$103,500</td>
+						</tr>
+						<tr id="row_54">
+							<td>Jonas</td>
+							<td>Alexander</td>
+							<td>Developer</td>
+							<td>San Francisco</td>
+							<td>$86,500</td>
+						</tr>
+						<tr id="row_55">
+							<td>Shad</td>
+							<td>Decker</td>
+							<td>Regional Director</td>
+							<td>Edinburgh</td>
+							<td>$183,000</td>
+						</tr>
+						<tr id="row_56">
+							<td>Michael</td>
+							<td>Bruce</td>
+							<td>Javascript Developer</td>
+							<td>Singapore</td>
+							<td>$183,000</td>
+						</tr>
+						<tr id="row_57">
+							<td>Donna</td>
+							<td>Snider</td>
+							<td>Customer Support</td>
+							<td>New York</td>
+							<td>$112,000</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">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/staff-html.php',
+		table: '#example',
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Position:&quot;,
+				name: &quot;position&quot;
+			}, {
+				label: &quot;Office:&quot;,
+				name: &quot;office&quot;
+			}, {
+				label: &quot;Salary:&quot;,
+				name: &quot;salary&quot;,
+				data: function (row, type, val) {
+					// Strip the formatting from the salary number
+					if ( type === 'set' ) {
+						row.salary = val;
+					}
+					return row.salary.replace(/[^0-9]/g, '');
+				}
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: 'Bfrtip',
+		columns: [
+			{ data: &quot;first_name&quot; },
+			{ data: &quot;last_name&quot; },
+			{ data: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;salary&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li class="active">
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<title>Editor examples - Editor advanced initialisation examples</title>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Editor advanced initialisation examples</span></h1>
+			<div class="info">
+				<p>The examples in this section show more advanced initialisation and configuration techniques than the <a href="../simple">simple examples</a>. Examples include
+				more complex join operations, using REST interfaces and how to show data in the table or form only.</p>
+				<p>These examples, along with the <a href="../api">API examples</a> will help you get the most out of Editor.</p>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/joinArray.html

@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Join tables - one-to-many join</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/joinArray.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name:  "users.first_name"
+			}, {
+				label: "Last name:",
+				name:  "users.last_name"
+			}, {
+				label: "Site:",
+				name:  "users.site",
+				type:  "select"
+			}, {
+				"label": "Permissions:",
+				"name": "permission[].id",
+				"type": "checkbox"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: {
+			url: "../../controllers/joinArray.php",
+			type: 'POST'
+		},
+		columns: [
+			{ data: "users.first_name" },
+			{ data: "users.last_name" },
+			{ data: "sites.name" },
+			{ data: "permission", render: "[, ].name" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Join tables - one-to-many join</span></h1>
+			<div class="info">
+				<p>When using joined database tables, there are times when you might wish to use a one-to-many relationship for your data, and display that as an editable
+				interface for your system's users.</p>
+				<p>On the client-side, Editor achieved this quite simply by making use of DataTables' powerful <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> and <a href=
+				"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> options to display the
+				data and the <a href="//editor.datatables.net/reference/option/fields.name"><code class="option" title="Editor initialisation option">fields.name</code></a> option
+				in Editor. These options all provide the ability to use array based data through Javascript square bracket notation (<code>[]</code>) - see the DataTables <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> documentation for detailed
+				information on the syntax that can be used for these options.</p>
+				<p>In this case each record in our <code>users</code> database table can have different access permissions granted. The one-to-many link is provided by a join
+				table on the database side.</p>
+				<p>For the editing interface Editor presents this as a checkbox list of options which the editor can use to select the options they want to assign to a particular
+				user.</p>
+				<p>On the server-side the Editor PHP, .NET and NodeJS libraries all provide a <code>Join</code> class that can be used to construct complex CRUD queries for
+				one-to-many data manipulation. For further information about using the libraries to build an editable DataTable with JOINed tables, please see the join
+				documentation (<a href="http://editor.datatables.net/manual/php/joins">PHP</a> | <a href="http://editor.datatables.net/manual/net/joins">.NET</a> | <a href=
+				"http://editor.datatables.net/manual/nodejs/joins">NodeJS</a>).</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Location</th>
+							<th>Permissions</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Location</th>
+							<th>Permissions</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/joinArray.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name:  &quot;users.first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name:  &quot;users.last_name&quot;
+			}, {
+				label: &quot;Site:&quot;,
+				name:  &quot;users.site&quot;,
+				type:  &quot;select&quot;
+			}, {
+				&quot;label&quot;: &quot;Permissions:&quot;,
+				&quot;name&quot;: &quot;permission[].id&quot;,
+				&quot;type&quot;: &quot;checkbox&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: {
+			url: &quot;../../controllers/joinArray.php&quot;,
+			type: 'POST'
+		},
+		columns: [
+			{ data: &quot;users.first_name&quot; },
+			{ data: &quot;users.last_name&quot; },
+			{ data: &quot;sites.name&quot; },
+			{ data: &quot;permission&quot;, render: &quot;[, ].name&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li class="active">
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/joinLinkTable.html

@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Join tables - link table</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/joinLinkTable.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name:  "users.first_name"
+			}, {
+				label: "Last name:",
+				name:  "users.last_name"
+			}, {
+				label: "Site:",
+				name:  "users.site",
+				type:  "select"
+			}, {
+				label: "Department:",
+				name:  "user_dept.dept_id",
+				type:  "select"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: {
+			url: "../../controllers/joinLinkTable.php",
+			type: 'POST'
+		},
+		columns: [
+			{ data: "users.first_name" },
+			{ data: "users.last_name" },
+			{ data: "sites.name" },
+			{ data: "dept.name" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Join tables - link table</span></h1>
+			<div class="info">
+				<p>Data in relational databases is often stored over multiple tables, partitioned by the data type and then joined together using SQL JOIN queries. In one form of
+				joined table, a 'link' table is used linking records between two different types of data.</p>
+				<p>In this example, which extends the <a href="../simple/join.html">simple join example</a>, the <code>users</code> and <code>dept</code> tables are linked by the
+				<code>user_dept</code> table. When the data is read, we read from all three tables (plus the <code>sites</code> table to show multiple joins working together). The
+				returned data structure for each row in this example is:</p>
+				<pre><code class="multiline language-js">{
+	"DT_RowId": "row_1",
+	"users": {
+		"first_name": "Quynn",
+		"last_name": "Contreras",
+		"site": "1"
+	},
+	"sites": {
+		"name": "Edinburgh"
+	},
+	"user_dept": {
+		"dept_id": "1"
+	},
+	"dept": {
+		"name": "IT"
+	}
+}
+</code></pre>
+				<p>For editing we want to write to three <code>users</code> fields and the <code>user_dept</code> field. The Editor instance is configured with these four fields
+				using the <a href="//editor.datatables.net/reference/option/fields.name"><code class="option" title="Editor initialisation option">fields.name</code></a> option
+				and the Editor server-side libraries perform the required SQL operations for us on create, edit and delete.</p>
+				<p>See the join documentation (<a href="http://editor.datatables.net/manual/php/joins">PHP</a> | <a href="http://editor.datatables.net/manual/net/joins">.NET</a> |
+				<a href="http://editor.datatables.net/manual/node/joins">NodeJS</a>) for further information about joins with Editor's framework libraries.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Location</th>
+							<th>Department</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Location</th>
+							<th>Department</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/joinLinkTable.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name:  &quot;users.first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name:  &quot;users.last_name&quot;
+			}, {
+				label: &quot;Site:&quot;,
+				name:  &quot;users.site&quot;,
+				type:  &quot;select&quot;
+			}, {
+				label: &quot;Department:&quot;,
+				name:  &quot;user_dept.dept_id&quot;,
+				type:  &quot;select&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: {
+			url: &quot;../../controllers/joinLinkTable.php&quot;,
+			type: 'POST'
+		},
+		columns: [
+			{ data: &quot;users.first_name&quot; },
+			{ data: &quot;users.last_name&quot; },
+			{ data: &quot;sites.name&quot; },
+			{ data: &quot;dept.name&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li class="active">
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/joinSelf.html

@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Join tables - self referencing join</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/joinSelf.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name: "users.first_name"
+			}, {
+				label: "Last name:",
+				name: "users.last_name"
+			}, {
+				label: "Manager:",
+				name: "users.manager",
+				type: "select"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/joinSelf.php",
+		columns: [
+			{ data: "users.first_name" },
+			{ data: "users.last_name" },
+			{
+				data: "manager",
+				render: function ( val, type, row ) {
+					return val.first_name ?
+						val.first_name +' '+ val.last_name :
+						'';
+				},
+				defaultContent: ""
+			}
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Join tables - self referencing join</span></h1>
+			<div class="info">
+				<p>Extending the <a href="../simple/join.html">simple join example</a>, here we show how a self referencing SQL table can be used with Editor. Self referencing
+				tables can be very useful when there is a hierarchy of like objects in the database.</p>
+				<p>In this particular example each staff member has a manager, who is also a member of staff. Using a self referencing join we can display each staff member and
+				their manager in the table, while Editor allows these fields to be easily editable.</p>
+				<p>In SQL terms, the <code>users</code> table has a column <code>manager</code> which references the <code>id</code> column in its own table. In an SQL statement
+				we use the <code>as</code> keyword to alias the joined table, which is exactly how the Editor server-side libraries also operate.</p>
+				<p>The data structure returned by the server for each row in this table is:</p>
+				<pre><code class="multiline language-js">{
+	"DT_RowId": "row_1",
+	"users": {
+		"first_name": "Quynn",
+		"last_name": "Contreras",
+		"manager": "1"
+	},
+	"manager": {
+		"first_name": "Quynn",
+		"last_name": "Contreras"
+	}
+}
+</code></pre>
+				<p>The three fields we want to edit are in the <code>users</code> object, but we also use the <code>manager</code> properties for display in the table (through the
+				use of <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> and <a href=
+				"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a>).</p>
+				<p>See the join documentation (<a href="http://editor.datatables.net/manual/php/joins">PHP</a> | <a href="http://editor.datatables.net/manual/net/joins">.NET</a> |
+				<a href="http://editor.datatables.net/manual/node/joins">NodeJS</a>) for further information about joins with Editor's framework libraries.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Manager</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Manager</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/joinSelf.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;users.first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;users.last_name&quot;
+			}, {
+				label: &quot;Manager:&quot;,
+				name: &quot;users.manager&quot;,
+				type: &quot;select&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/joinSelf.php&quot;,
+		columns: [
+			{ data: &quot;users.first_name&quot; },
+			{ data: &quot;users.last_name&quot; },
+			{
+				data: &quot;manager&quot;,
+				render: function ( val, type, row ) {
+					return val.first_name ?
+						val.first_name +' '+ val.last_name :
+						'';
+				},
+				defaultContent: &quot;&quot;
+			}
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li class="active">
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/jsonId.html

@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Row ID source specification</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/jsonId.php",
+		"table": "#example",
+		"idSrc": "id",
+		"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"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/jsonId.php",
+		columns: [
+			{ 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: "extn" },
+			{ data: "start_date" },
+			{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Row ID source specification</span></h1>
+			<div class="info">
+				<p>By default Editor will use the <code>tr</code> element's <code>id</code> attribute to identify the row to the server (more specifically this will typically
+				contain the database's primary key to uniquely identity the row). While this default method can be very useful, particularly if you use the <code>DT_RowId</code>
+				JSON option to set the id, you may wish to read the row's id from the JSON data source, rather than the DOM. This is easily done using the <a href=
+				"//editor.datatables.net/reference/option/idSrc"><code class="option" title="Editor initialisation option">idSrc</code></a> option.</p>
+				<p>The example below, with <a href="//editor.datatables.net/reference/option/idSrc"><code class="option" title="Editor initialisation option">idSrc</code></a> is
+				set to <code>id</code> is suitable for cases where the data source objects look like: <code>{ "id": 2, "first_name": "Fiona", ...}</code>. Like other data source
+				options the <a href="//editor.datatables.net/reference/option/idSrc"><code class="option" title="Editor initialisation option">idSrc</code></a> option can be given
+				in dotted object notation to read nested objects.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		&quot;ajax&quot;: &quot;../../controllers/jsonId.php&quot;,
+		&quot;table&quot;: &quot;#example&quot;,
+		&quot;idSrc&quot;: &quot;id&quot;,
+		&quot;fields&quot;: [ {
+				&quot;label&quot;: &quot;First name:&quot;,
+				&quot;name&quot;: &quot;first_name&quot;
+			}, {
+				&quot;label&quot;: &quot;Last name:&quot;,
+				&quot;name&quot;: &quot;last_name&quot;
+			}, {
+				&quot;label&quot;: &quot;Position:&quot;,
+				&quot;name&quot;: &quot;position&quot;
+			}, {
+				&quot;label&quot;: &quot;Office:&quot;,
+				&quot;name&quot;: &quot;office&quot;
+			}, {
+				&quot;label&quot;: &quot;Extension:&quot;,
+				&quot;name&quot;: &quot;extn&quot;
+			}, {
+				&quot;label&quot;: &quot;Start date:&quot;,
+				&quot;name&quot;: &quot;start_date&quot;,
+				&quot;type&quot;: &quot;datetime&quot;
+			}, {
+				&quot;label&quot;: &quot;Salary:&quot;,
+				&quot;name&quot;: &quot;salary&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/jsonId.php&quot;,
+		columns: [
+			{ 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: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;extn&quot; },
+			{ data: &quot;start_date&quot; },
+			{ data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li class="active">
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/localstorage.html

@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Ajax override - using localStorage for the data source</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	// Object that will contain the local state
+	var todo = {};
+
+	// Create or update the todo localStorage entry
+	if ( localStorage.getItem('todo') ) {
+		todo = JSON.parse( localStorage.getItem('todo') );
+	}
+
+	// Set up the editor
+	editor = new $.fn.dataTable.Editor( {
+		table: "#example",
+		fields: [
+			{
+				label: "Item:",
+				name: "item"
+			}, {
+				label: "Status:",
+				name: "status",
+				type: "radio",
+				def: "To do",
+				options: [ 'To do', 'Done' ]
+			}
+		],
+		ajax: function ( method, url, d, successCallback, errorCallback ) {
+			var output = { data: [] };
+
+			if ( d.action === 'create' ) {
+				// Create new row(s), using the current time and loop index as
+				// the row id
+				var dateKey = +new Date();
+
+				$.each( d.data, function (key, value) {
+					var id = dateKey+''+key;
+
+					value.DT_RowId = id;
+					todo[ id ] = value;
+					output.data.push( value );
+				} );
+			}
+			else if ( d.action === 'edit' ) {
+				// Update each edited item with the data submitted
+				$.each( d.data, function (id, value) {
+					value.DT_RowId = id;
+					$.extend( todo[ id ], value );
+					output.data.push( todo[ id ] );
+				} );
+			}
+			else if ( d.action === 'remove' ) {
+				// Remove items from the object
+				$.each( d.data, function (id) {
+					delete todo[ id ];
+				} );
+			}
+
+			// Store the latest `todo` object for next reload
+			localStorage.setItem( 'todo', JSON.stringify(todo) );
+
+			// Show Editor what has changed
+			successCallback( output );
+		}
+	} );
+
+	// Initialise the DataTable
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		data: $.map( todo, function (value, key) {
+			return value;
+		} ),
+		columns: [
+			{ data: "item" },
+			{ data: "status" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Ajax override - using localStorage for the data source</span></h1>
+			<div class="info">
+				<p>This example shows how the <a href="//editor.datatables.net/reference/option/ajax"><code class="option" title="Editor initialisation option">ajax</code></a>
+				initialisation option can be used to replace the default Ajax call that Editor makes and instead use the browser's <code>localStorage</code> abilities to save the
+				state of the table locally on the browser. This means that the user effectively has persistent storage, but it is available only to them on their current
+				browser.</p>
+				<p>The code in this example shows the <a href="//editor.datatables.net/reference/option/ajax"><code class="option" title=
+				"Editor initialisation option">ajax</code></a> option as a function that <a href="//editor.datatables.net/manual/server">implements everything that is required by
+				Editor</a> for data storage and retrieval. The 'create', 'edit' and 'remove' actions are each handled by storing the submitted data in a local variable, which is
+				then stored in local storage for data persistence.</p>
+				<p>Note that this example fully supports Editor's multi-row editing capability as it fully implements the <a href="//editor.datatables.net/manual/server">client /
+				server data interchange format</a> Editor uses.</p>
+				<p>Although this particular use case is fairly limited, it does show how Editor's <a href="//editor.datatables.net/reference/option/ajax"><code class="option"
+				title="Editor initialisation option">ajax</code></a> option can be used to intercept and manage the data requests that Editor makes. Expanding on this almost any
+				data storage system could be used from <a href="https://www.firebase.com/">Firebase</a> to <a href=
+				"http://www.html5rocks.com/en/tutorials/websockets/basics/">WebSockets</a>.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>Item</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Item</th>
+							<th>Status</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	// Object that will contain the local state
+	var todo = {};
+
+	// Create or update the todo localStorage entry
+	if ( localStorage.getItem('todo') ) {
+		todo = JSON.parse( localStorage.getItem('todo') );
+	}
+
+	// Set up the editor
+	editor = new $.fn.dataTable.Editor( {
+		table: &quot;#example&quot;,
+		fields: [
+			{
+				label: &quot;Item:&quot;,
+				name: &quot;item&quot;
+			}, {
+				label: &quot;Status:&quot;,
+				name: &quot;status&quot;,
+				type: &quot;radio&quot;,
+				def: &quot;To do&quot;,
+				options: [ 'To do', 'Done' ]
+			}
+		],
+		ajax: function ( method, url, d, successCallback, errorCallback ) {
+			var output = { data: [] };
+
+			if ( d.action === 'create' ) {
+				// Create new row(s), using the current time and loop index as
+				// the row id
+				var dateKey = +new Date();
+
+				$.each( d.data, function (key, value) {
+					var id = dateKey+''+key;
+
+					value.DT_RowId = id;
+					todo[ id ] = value;
+					output.data.push( value );
+				} );
+			}
+			else if ( d.action === 'edit' ) {
+				// Update each edited item with the data submitted
+				$.each( d.data, function (id, value) {
+					value.DT_RowId = id;
+					$.extend( todo[ id ], value );
+					output.data.push( todo[ id ] );
+				} );
+			}
+			else if ( d.action === 'remove' ) {
+				// Remove items from the object
+				$.each( d.data, function (id) {
+					delete todo[ id ];
+				} );
+			}
+
+			// Store the latest `todo` object for next reload
+			localStorage.setItem( 'todo', JSON.stringify(todo) );
+
+			// Show Editor what has changed
+			successCallback( output );
+		}
+	} );
+
+	// Initialise the DataTable
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		data: $.map( todo, function (value, key) {
+			return value;
+		} ),
+		columns: [
+			{ data: &quot;item&quot; },
+			{ data: &quot;status&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li class="active">
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/multiItem.html

@@ -0,0 +1,633 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Multi-item editing (rows, columns, cells)</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	a.buttons-select-rows,
+	a.buttons-select-none {
+		margin-left: 1em;
+	}
+
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/staff.php",
+		table: "#example",
+		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"
+			}
+		],
+		formOptions: {
+			main: {
+				scope: 'cell' // Allow multi-row editing with cell selection
+			}
+		}
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/staff.php",
+		columns: [
+			{
+				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;
+				},
+				editField: [ 'first_name', 'last_name' ]
+			},
+			{ data: "position" },
+			{ data: "office" },
+			{ data: "extn" },
+			{ data: "start_date" },
+			{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor },
+			"selectRows",
+			"selectColumns",
+			"selectCells",
+			"selectNone"
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Multi-item editing (rows, columns, cells)</span></h1>
+			<div class="info">
+				<p>This example demonstrates Editor's multi-item editing capabilities, showing specifically that multi-item editing is not limited to rows, but columns and cells
+				can also be selected and edited with a single click. Furthermore, it is possible to combine the selection of rows, columns and cells to provide complex data
+				updates with ease.</p>
+				<p>The item selection here (and all other examples) is provided by the <a href="//datatables.net/extensions/select">Select extension</a> for DataTables. It has the
+				ability to select the individual components of the table - which item type is selected can be controlled through the <a href=
+				"//datatables.net/reference/api/select.items()"><code class="api" title="Scroller API method">select.items()</code></a> method, or the <a href=
+				"//datatables.net/reference/button/selectRows"><code class="button" title="Scroller button type">selectRows</code></a>, <a href=
+				"//datatables.net/reference/button/selectColumns"><code class="button" title="Scroller button type">selectColumns</code></a> and <a href=
+				"//datatables.net/reference/button/selectCells"><code class="button" title="Scroller button type">selectCells</code></a> buttons that Select provides.</p>
+				<p>These buttons are utilised in this example to allow the end user to easily change what items will be selected.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/staff.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Position:&quot;,
+				name: &quot;position&quot;
+			}, {
+				label: &quot;Office:&quot;,
+				name: &quot;office&quot;
+			}, {
+				label: &quot;Extension:&quot;,
+				name: &quot;extn&quot;
+			}, {
+				label: &quot;Start date:&quot;,
+				name: &quot;start_date&quot;,
+				type: &quot;datetime&quot;
+			}, {
+				label: &quot;Salary:&quot;,
+				name: &quot;salary&quot;
+			}
+		],
+		formOptions: {
+			main: {
+				scope: 'cell' // Allow multi-row editing with cell selection
+			}
+		}
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/staff.php&quot;,
+		columns: [
+			{
+				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;
+				},
+				editField: [ 'first_name', 'last_name' ]
+			},
+			{ data: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;extn&quot; },
+			{ data: &quot;start_date&quot; },
+			{ data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor },
+			&quot;selectRows&quot;,
+			&quot;selectColumns&quot;,
+			&quot;selectCells&quot;,
+			&quot;selectNone&quot;
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css">a.buttons-select-rows,
+	a.buttons-select-none {
+		margin-left: 1em;
+	}</code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li class="active">
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/parentChild.html

@@ -0,0 +1,707 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Parent child editor</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+
+$(document).ready(function() {
+	var siteEditor = new $.fn.dataTable.Editor( {
+		ajax: "../../controllers/sites.php",
+		table: "#sites",
+		fields: [ {
+				label: "Site name:",
+				name: "name"
+			}
+		]
+	} );
+	window.editor = siteEditor; // for demo only!
+
+	var siteTable = $('#sites').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/sites.php",
+		columns: [
+			{ data: 'name' },
+			{ data: 'users', render: function ( data ) {
+				return data.length;
+			} }
+		],
+		select: {
+			style: 'single'
+		},
+		buttons: [
+			{ extend: "create", editor: siteEditor },
+			{ extend: "edit",   editor: siteEditor },
+			{ extend: "remove", editor: siteEditor }
+		]
+	} );
+
+
+	var usersEditor = new $.fn.dataTable.Editor( {
+		ajax: {
+			url: '../../controllers/users.php',
+			data: function ( d ) {
+				var selected = siteTable.row( { selected: true } );
+				if ( selected.any() ) {
+					d.site = selected.data().id;
+				}
+			}
+		},
+		table: '#users',
+		fields: [ {
+				label: "First name:",
+				name: "users.first_name"
+			}, {
+				label: "Last name:",
+				name: "users.last_name"
+			}, {
+				label: "Phone #:",
+				name: "users.phone"
+			}, {
+				label: "Site:",
+				name: "users.site",
+				type: "select",
+				placeholder: "Select a location"
+			}
+		]
+	} );
+
+	var usersTable = $('#users').DataTable( {
+		dom: 'Bfrtip',
+		ajax: {
+			url: '../../controllers/users.php',
+			type: 'post',
+			data: function ( d ) {
+				var selected = siteTable.row( { selected: true } );
+				if ( selected.any() ) {
+					d.site = selected.data().id;
+				}
+			}
+		},
+		columns: [
+			{ data: 'users.first_name' },
+			{ data: 'users.last_name' },
+			{ data: 'users.phone' },
+			{ data: 'sites.name' }
+		],
+		select: true,
+		buttons: [
+			{ extend: 'create', editor: usersEditor, enabled: false, init: function(dt) {
+				var that = this;
+				siteTable.on('select deselect', function() {
+					that.enable(siteTable.rows({selected: true}).any())
+				})
+			}},
+			{ extend: 'edit',   editor: usersEditor },
+			{ extend: 'remove', editor: usersEditor }
+		]
+	} );
+	
+
+	siteTable.on( 'select', function (e) {
+		usersTable.ajax.reload();
+
+		usersEditor
+			.field( 'users.site' )
+			.def( siteTable.row( { selected: true } ).data().id );
+	} );
+
+	siteTable.on( 'deselect', function () {
+		usersTable.ajax.reload();
+	} );
+	
+	usersEditor.on( 'submitSuccess', function () {
+		siteTable.ajax.reload();
+	} );
+
+	siteEditor.on( 'submitSuccess', function () {
+		usersTable.ajax.reload();
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Parent child editor</span></h1>
+			<div class="info">
+				<p>This example demonstrates Editor being used in a parent / child manner to edit groups of related items. The code and methodology is <a href=
+				"https://datatables.net/blog/2016-03-25">fully documented in this blog post</a>. A similar post is also available showing <a href=
+				"https://datatables.net/blog/2019-01-11">parent / child editing in a child row</a>.</p>
+			</div>
+			<div class="demo-html">
+				<table id="sites" class="display">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Users</th>
+						</tr>
+					</thead>
+				</table>
+				<table id="users" class="display">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+						</tr>
+					</thead>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	var siteEditor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/sites.php&quot;,
+		table: &quot;#sites&quot;,
+		fields: [ {
+				label: &quot;Site name:&quot;,
+				name: &quot;name&quot;
+			}
+		]
+	} );
+	window.editor = siteEditor; // for demo only!
+
+	var siteTable = $('#sites').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/sites.php&quot;,
+		columns: [
+			{ data: 'name' },
+			{ data: 'users', render: function ( data ) {
+				return data.length;
+			} }
+		],
+		select: {
+			style: 'single'
+		},
+		buttons: [
+			{ extend: &quot;create&quot;, editor: siteEditor },
+			{ extend: &quot;edit&quot;,   editor: siteEditor },
+			{ extend: &quot;remove&quot;, editor: siteEditor }
+		]
+	} );
+
+
+	var usersEditor = new $.fn.dataTable.Editor( {
+		ajax: {
+			url: '../../controllers/users.php',
+			data: function ( d ) {
+				var selected = siteTable.row( { selected: true } );
+				if ( selected.any() ) {
+					d.site = selected.data().id;
+				}
+			}
+		},
+		table: '#users',
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;users.first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;users.last_name&quot;
+			}, {
+				label: &quot;Phone #:&quot;,
+				name: &quot;users.phone&quot;
+			}, {
+				label: &quot;Site:&quot;,
+				name: &quot;users.site&quot;,
+				type: &quot;select&quot;,
+				placeholder: &quot;Select a location&quot;
+			}
+		]
+	} );
+
+	var usersTable = $('#users').DataTable( {
+		dom: 'Bfrtip',
+		ajax: {
+			url: '../../controllers/users.php',
+			type: 'post',
+			data: function ( d ) {
+				var selected = siteTable.row( { selected: true } );
+				if ( selected.any() ) {
+					d.site = selected.data().id;
+				}
+			}
+		},
+		columns: [
+			{ data: 'users.first_name' },
+			{ data: 'users.last_name' },
+			{ data: 'users.phone' },
+			{ data: 'sites.name' }
+		],
+		select: true,
+		buttons: [
+			{ extend: 'create', editor: usersEditor, enabled: false, init: function(dt) {
+				var that = this;
+				siteTable.on('select deselect', function() {
+					that.enable(siteTable.rows({selected: true}).any())
+				})
+			}},
+			{ extend: 'edit',   editor: usersEditor },
+			{ extend: 'remove', editor: usersEditor }
+		]
+	} );
+	
+
+	siteTable.on( 'select', function (e) {
+		usersTable.ajax.reload();
+
+		usersEditor
+			.field( 'users.site' )
+			.def( siteTable.row( { selected: true } ).data().id );
+	} );
+
+	siteTable.on( 'deselect', function () {
+		usersTable.ajax.reload();
+	} );
+	
+	usersEditor.on( 'submitSuccess', function () {
+		siteTable.ajax.reload();
+	} );
+
+	siteEditor.on( 'submitSuccess', function () {
+		usersTable.ajax.reload();
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li class="active">
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/sqlView.html

@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - SQL VIEW</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/staff-view.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name: "first_name"
+			}, {
+				label: "Last name:",
+				name: "last_name"
+			}, {
+				label: "Phone #:",
+				name: "phone"
+			}, {
+				label: "City:",
+				name: "city"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: {
+			url: "../../controllers/staff-view.php",
+			type: 'POST'
+		},
+		columns: [
+			{ data: "first_name" },
+			{ data: "last_name" },
+			{ data: "phone" },
+			{ data: "city" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>SQL VIEW</span></h1>
+			<div class="info">
+				<p>The majority of our examples demonstrate client-side functionality, but in this case, the example shows how data can be read from a VIEW on the database, while
+				still being written to the base table for the other CRUD actions. The VIEW used in this example is fairly contrived with a simple sub-select being used - a
+				<code>WHERE</code> condition could have been used, but this shows the building blocks for how a more complex VIEW.</p>
+				<p>On the server-side note the use of the <code>readTable()</code> method to tell the server-side libraries from where to read data. The field names are shared
+				between the VIEW and base table in this case, but optionally you could enable and disable fields for read / write operations as required.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/staff-view.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Phone #:&quot;,
+				name: &quot;phone&quot;
+			}, {
+				label: &quot;City:&quot;,
+				name: &quot;city&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: {
+			url: &quot;../../controllers/staff-view.php&quot;,
+			type: 'POST'
+		},
+		columns: [
+			{ data: &quot;first_name&quot; },
+			{ data: &quot;last_name&quot; },
+			{ data: &quot;phone&quot; },
+			{ data: &quot;city&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li class="active">
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/tableOnlyData.html

@@ -0,0 +1,544 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Data shown in table only</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/tableOnlyData.php",
+		"table": "#example",
+		"fields": [ {
+				"label": "First name:",
+				"name": "first_name"
+			}, {
+				"label": "Last name:",
+				"name": "last_name"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/tableOnlyData.php",
+		columns: [
+			{ data: "first_name" },
+			{ data: "last_name" },
+			{ data: "updated_date" }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Data shown in table only</span></h1>
+			<div class="info">
+				<p>This example shows how Editor can handle the case where data is shown in the table, but is not available in the form to be edited. This can be useful where the
+				server generates some of the data to be shown in the table, for example a timestamp showing the last edited time, or an auto incrementing sequence. This is the
+				inverse of the <a href="formOnlyData.html">form only data</a> example.</p>
+				<p>The way this works is that Editor simply returns the details for the row on each create and edit action, in the <code>row</code> return parameter. This
+				information is then used to populate the DataTable.</p>
+			</div>
+			<div class="demo-html">
+				<table class="display" id="example" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Updated date</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Updated date</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		&quot;ajax&quot;: &quot;../../controllers/tableOnlyData.php&quot;,
+		&quot;table&quot;: &quot;#example&quot;,
+		&quot;fields&quot;: [ {
+				&quot;label&quot;: &quot;First name:&quot;,
+				&quot;name&quot;: &quot;first_name&quot;
+			}, {
+				&quot;label&quot;: &quot;Last name:&quot;,
+				&quot;name&quot;: &quot;last_name&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/tableOnlyData.php&quot;,
+		columns: [
+			{ data: &quot;first_name&quot; },
+			{ data: &quot;last_name&quot; },
+			{ data: &quot;updated_date&quot; }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li class="active">
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/upload-many.html

@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - File upload (many)</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+
+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/upload-many.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name: "users.first_name"
+			}, {
+				label: "Last name:",
+				name: "users.last_name"
+			}, {
+				label: "Phone #:",
+				name: "users.phone"
+			}, {
+				label: "Site:",
+				name: "users.site",
+				type: "select"
+			}, {
+				label: "Images:",
+				name: "files[].id",
+				type: "uploadMany",
+				display: function ( fileId, counter ) {
+					return '<img src="'+editor.file( 'files', fileId ).web_path+'"/>';
+				},
+				noFileText: 'No images'
+			}
+		]
+	} );
+
+	var table = $('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/upload-many.php",
+		columns: [
+			{ data: "users.first_name" },
+			{ data: "users.last_name" },
+			{ data: "users.phone" },
+			{ data: "sites.name" },
+			{
+				data: "files",
+				render: function ( d ) {
+					return d.length ?
+						d.length+' image(s)' :
+						'No image';
+				},
+				title: "Image"
+			}
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>File upload (many)</span></h1>
+			<div class="info">
+				<p>This example shows how the <a href="//editor.datatables.net/reference/field/uploadMany"><code class="field" title="Editor field type">uploadMany</code></a>
+				field type can be used to allow multiple images to be uploaded and associated with a single field in the form. Images can be added or removed from the collection
+				and this is designed to work with a one-to-many join in the backend database.</p>
+				<p>The upload options of Editor are extensively documented in the manual (<a href="//editor.datatables.net/manual/upload">Javascript</a>, <a href=
+				"//editor.datatables.net/manual/php/upload">PHP</a>, <a href="//editor.datatables.net/manual/net/upload">.NET</a> and <a href=
+				"//editor.datatables.net/manual/node/upload">NodeJS</a>) and details the various options available.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+							<th>Image</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>Location</th>
+							<th>Image</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/upload-many.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;users.first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;users.last_name&quot;
+			}, {
+				label: &quot;Phone #:&quot;,
+				name: &quot;users.phone&quot;
+			}, {
+				label: &quot;Site:&quot;,
+				name: &quot;users.site&quot;,
+				type: &quot;select&quot;
+			}, {
+				label: &quot;Images:&quot;,
+				name: &quot;files[].id&quot;,
+				type: &quot;uploadMany&quot;,
+				display: function ( fileId, counter ) {
+					return '&lt;img src=&quot;'+editor.file( 'files', fileId ).web_path+'&quot;/&gt;';
+				},
+				noFileText: 'No images'
+			}
+		]
+	} );
+
+	var table = $('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/upload-many.php&quot;,
+		columns: [
+			{ data: &quot;users.first_name&quot; },
+			{ data: &quot;users.last_name&quot; },
+			{ data: &quot;users.phone&quot; },
+			{ data: &quot;sites.name&quot; },
+			{
+				data: &quot;files&quot;,
+				render: function ( d ) {
+					return d.length ?
+						d.length+' image(s)' :
+						'No image';
+				},
+				title: &quot;Image&quot;
+			}
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li class="active">
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/advanced/upload.html

@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - File upload</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+
+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/upload.php",
+		table: "#example",
+		fields: [ {
+				label: "First name:",
+				name: "first_name"
+			}, {
+				label: "Last name:",
+				name: "last_name"
+			}, {
+				label: "Phone #:",
+				name: "phone"
+			}, {
+				label: "City:",
+				name: "city"
+			}, {
+				label: "Image:",
+				name: "image",
+				type: "upload",
+				display: function ( file_id ) {
+					return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
+				},
+				clearText: "Clear",
+				noImageText: 'No image'
+			}
+		]
+	} );
+
+	var table = $('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/upload.php",
+		columns: [
+			{ data: "first_name" },
+			{ data: "last_name" },
+			{ data: "phone" },
+			{ data: "city" },
+			{
+				data: "image",
+				render: function ( file_id ) {
+					return file_id ?
+						'<img src="'+editor.file( 'files', file_id ).web_path+'"/>' :
+						null;
+				},
+				defaultContent: "No image",
+				title: "Image"
+			}
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>File upload</span></h1>
+			<div class="info">
+				<p>This example shows Editor being used with the <a href="//editor.datatables.net/reference/field/upload"><code class="field" title=
+				"Editor field type">upload</code></a> fields type to give end users the ability to upload a file in the form. The <a href=
+				"//editor.datatables.net/reference/field/upload"><code class="field" title="Editor field type">upload</code></a> field type allows just a single file to be
+				uploaded, while its companion input type <a href="//editor.datatables.net/reference/field/uploadMany"><code class="field" title=
+				"Editor field type">uploadMany</code></a> provides the ability to have multiple files uploaded for a single field.</p>
+				<p>The upload options of Editor are extensively documented in the manual (<a href="//editor.datatables.net/manual/upload">Javascript</a>, <a href=
+				"//editor.datatables.net/manual/php/upload">PHP</a>, <a href="//editor.datatables.net/manual/net/upload">.NET</a> and <a href=
+				"//editor.datatables.net/manual/node/upload">NodeJS</a>) and details the various options available.</p>
+				<p>In this example an image file can be uploaded, limited to 500KB using server-side validation. To display the image a simple <code class="tag" title=
+				"HTML tag">img</code> tag is used, with information about the file to be displayed retrieved using the <a href=
+				"//editor.datatables.net/reference/api/file()"><code class="api" title="Editor API method">file()</code></a> method which Editor makes available and is
+				automatically populated based on the server-side configuration.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" cellspacing="0" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>City</th>
+							<th>Image</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone #</th>
+							<th>City</th>
+							<th>Image</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/upload.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Phone #:&quot;,
+				name: &quot;phone&quot;
+			}, {
+				label: &quot;City:&quot;,
+				name: &quot;city&quot;
+			}, {
+				label: &quot;Image:&quot;,
+				name: &quot;image&quot;,
+				type: &quot;upload&quot;,
+				display: function ( file_id ) {
+					return '&lt;img src=&quot;'+editor.file( 'files', file_id ).web_path+'&quot;/&gt;';
+				},
+				clearText: &quot;Clear&quot;,
+				noImageText: 'No image'
+			}
+		]
+	} );
+
+	var table = $('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/upload.php&quot;,
+		columns: [
+			{ data: &quot;first_name&quot; },
+			{ data: &quot;last_name&quot; },
+			{ data: &quot;phone&quot; },
+			{ data: &quot;city&quot; },
+			{
+				data: &quot;image&quot;,
+				render: function ( file_id ) {
+					return file_id ?
+						'&lt;img src=&quot;'+editor.file( 'files', file_id ).web_path+'&quot;/&gt;' :
+						null;
+				},
+				defaultContent: &quot;No image&quot;,
+				title: &quot;Image&quot;
+			}
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="./tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="./REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="./jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="./compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="./htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="./sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="./joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="./joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="./joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="./parentChild.html">Parent child editor</a>
+							</li>
+							<li class="active">
+								<a href="./upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="./upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="../api/dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="../api/clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="../api/triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="../api/backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="../api/cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="../api/checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="../api/softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="../api/duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="../api/removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/api/backNext.html

@@ -0,0 +1,763 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Previous / next editing buttons</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	div.DTE_Footer_Content {
+		position: relative;
+	}
+
+	div.DTE_Form_Buttons {
+		float: right;
+	}
+	
+	div.DTE div.DTE_Form_Buttons button {
+		float: left;
+		margin: 0;
+		border-radius: 0;
+	}
+	
+	div.DTE div.DTE_Form_Buttons button:first-child {
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+	}
+	
+	div.DTE div.DTE_Form_Buttons button:last-child {
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/staff.php",
+		table: "#example",
+		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"
+			}, {
+				label: "Salary:",
+				name: "salary"
+			}
+		]
+	} );
+
+	// Buttons array definition to create previous, save and next buttons in
+	// an Editor form
+	var backNext = [
+		{
+			text: "&lt;",
+			action: function (e) {
+				// On submit, find the currently selected row and select the previous one
+				this.submit( function () {
+					var indexes = table.rows( {search: 'applied'} ).indexes();
+					var currentIndex = table.row( {selected: true} ).index();
+					var currentPosition = indexes.indexOf( currentIndex );
+
+					if ( currentPosition > 0 ) {
+						table.row( currentIndex ).deselect();
+						table.row( indexes[ currentPosition-1 ] ).select();
+					}
+
+					// Trigger editing through the button
+					table.button( 1 ).trigger();
+				}, null, null, false );
+			}
+		},
+		'Save',
+		{
+			text: "&gt;",
+			action: function (e) {
+				// On submit, find the currently selected row and select the next one
+				this.submit( function () {
+					var indexes = table.rows( {search: 'applied'} ).indexes();
+					var currentIndex = table.row( {selected: true} ).index();
+					var currentPosition = indexes.indexOf( currentIndex );
+
+					if ( currentPosition < indexes.length-1 ) {
+						table.row( currentIndex ).deselect();
+						table.row( indexes[ currentPosition+1 ] ).select();
+					}
+
+					// Trigger editing through the button
+					table.button( 1 ).trigger();
+				}, null, null, false );
+			}
+		}
+	];
+
+	var table = $('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/staff.php",
+		columns: [
+			{ 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: "extn" },
+			{ data: "start_date" },
+			{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: "create", editor: editor },
+			{
+				extend: 'selected',
+				text:   'Edit',
+				action: function () {
+					var indexes = table.rows( {selected: true} ).indexes();
+
+					editor.edit( indexes, {
+						title: 'Edit',
+						buttons: indexes.length === 1 ?
+							backNext :
+							'Save'
+					} );
+				}
+			},
+			{ extend: "remove", editor: editor }
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Previous / next editing buttons</span></h1>
+			<div class="info">
+				<p>Often when editing data in tables, you may wish to edit consecutive records. While in Editor it is perfectly feasible to save a row, then click to edit another,
+				it can be more convenient to provide <em>Previous</em> and <em>Next</em> buttons as well as the regular save button to the end user. These two additional buttons
+				also save the record that has been worked on, but rather than closing the editing display, they immediately load the next record in the table and present that for
+				editing.</p>
+				<p>This example makes use of the <a href="//datatables.net/reference/button/selected"><code class="button" title="Buttons button type">selected</code></a> button
+				type, rather than the <a href="//editor.datatables.net/reference/button/edit"><code class="button" title="Editor button type">edit</code></a> button found in the
+				majority of other examples. This is because continuous row selection doesn't make much sense with multi-row editing, so by defining our own <a href=
+				"//datatables.net/reference/option/buttons.buttons.action"><code class="option" title="Buttons initialisation option">buttons.buttons.action</code></a> method that
+				will trigger the editing (<a href="//editor.datatables.net/reference/api/edit()"><code class="api" title="Editor API method">edit()</code></a>) we can decide if
+				the previous / next buttons should be shown or not.</p>
+				<p>The previous / next buttons make use of the Select API (<a href="//datatables.net/reference/api/row().select()"><code class="api" title=
+				"Scroller API method">row().select()</code></a> and <a href="//datatables.net/reference/api/row().deselect()"><code class="api" title=
+				"Scroller API method">row().deselect()</code></a>) to manipulate the selected rows, and the Buttons API (<a href=
+				"//datatables.net/reference/api/button().trigger()"><code class="api" title="Buttons API method">button().trigger()</code></a>) to trigger the next editing
+				action.</p>
+				<p>A little bit of extra CSS styling is also used to visually group the three buttons.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/staff.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Position:&quot;,
+				name: &quot;position&quot;
+			}, {
+				label: &quot;Office:&quot;,
+				name: &quot;office&quot;
+			}, {
+				label: &quot;Extension:&quot;,
+				name: &quot;extn&quot;
+			}, {
+				label: &quot;Start date:&quot;,
+				name: &quot;start_date&quot;
+			}, {
+				label: &quot;Salary:&quot;,
+				name: &quot;salary&quot;
+			}
+		]
+	} );
+
+	// Buttons array definition to create previous, save and next buttons in
+	// an Editor form
+	var backNext = [
+		{
+			text: &quot;&amp;lt;&quot;,
+			action: function (e) {
+				// On submit, find the currently selected row and select the previous one
+				this.submit( function () {
+					var indexes = table.rows( {search: 'applied'} ).indexes();
+					var currentIndex = table.row( {selected: true} ).index();
+					var currentPosition = indexes.indexOf( currentIndex );
+
+					if ( currentPosition &gt; 0 ) {
+						table.row( currentIndex ).deselect();
+						table.row( indexes[ currentPosition-1 ] ).select();
+					}
+
+					// Trigger editing through the button
+					table.button( 1 ).trigger();
+				}, null, null, false );
+			}
+		},
+		'Save',
+		{
+			text: &quot;&amp;gt;&quot;,
+			action: function (e) {
+				// On submit, find the currently selected row and select the next one
+				this.submit( function () {
+					var indexes = table.rows( {search: 'applied'} ).indexes();
+					var currentIndex = table.row( {selected: true} ).index();
+					var currentPosition = indexes.indexOf( currentIndex );
+
+					if ( currentPosition &lt; indexes.length-1 ) {
+						table.row( currentIndex ).deselect();
+						table.row( indexes[ currentPosition+1 ] ).select();
+					}
+
+					// Trigger editing through the button
+					table.button( 1 ).trigger();
+				}, null, null, false );
+			}
+		}
+	];
+
+	var table = $('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/staff.php&quot;,
+		columns: [
+			{ 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: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;extn&quot; },
+			{ data: &quot;start_date&quot; },
+			{ data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{
+				extend: 'selected',
+				text:   'Edit',
+				action: function () {
+					var indexes = table.rows( {selected: true} ).indexes();
+
+					editor.edit( indexes, {
+						title: 'Edit',
+						buttons: indexes.length === 1 ?
+							backNext :
+							'Save'
+					} );
+				}
+			},
+			{ extend: &quot;remove&quot;, editor: editor }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css">div.DTE_Footer_Content {
+		position: relative;
+	}
+
+	div.DTE_Form_Buttons {
+		float: right;
+	}
+	
+	div.DTE div.DTE_Form_Buttons button {
+		float: left;
+		margin: 0;
+		border-radius: 0;
+	}
+	
+	div.DTE div.DTE_Form_Buttons button:first-child {
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+	}
+	
+	div.DTE div.DTE_Form_Buttons button:last-child {
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}</code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced/formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="../advanced/tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="../advanced/multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="../advanced/REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="../advanced/deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="../advanced/localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="../advanced/jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="../advanced/compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="../advanced/htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="../advanced/sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="../advanced/joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="../advanced/joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="../advanced/joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="../advanced/parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="../advanced/upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="../advanced/upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="./dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="./clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="./triggerButton.html">Customised control buttons</a>
+							</li>
+							<li class="active">
+								<a href="./backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="./cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="./checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="./softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="./duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="./removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/api/cancelButton.html

@@ -0,0 +1,643 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Cancel button</title>
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	a.marginLeft {
+		margin-left: 1em;
+	}
+
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/staff.php",
+		table: "#example",
+		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"
+			}, {
+				label: "Salary:",
+				name: "salary"
+			}
+		]
+	} );
+
+	var table = $('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/staff.php",
+		columns: [
+			{ 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: "extn" },
+			{ data: "start_date" },
+			{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{
+				extend: "create",
+				editor: editor,
+				formButtons: [
+					'Create',
+					{ text: 'Cancel', action: function () { this.close(); } }
+				]
+			},
+			{
+				extend: "edit",
+				editor: editor,
+				formButtons: [
+					'Edit',
+					{ text: 'Cancel', action: function () { this.close(); } }
+				]
+			},
+			{
+				extend: "remove",
+				editor: editor,
+				formButtons: [
+					'Delete',
+					{ text: 'Cancel', action: function () { this.close(); } }
+				]
+			}
+		]
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Cancel button</span></h1>
+			<div class="info">
+				<p>This example shows how the <code>formButtons</code> option of the <a href="//editor.datatables.net/reference/button/create"><code class="button" title=
+				"Editor button type">create</code></a>, <a href="//editor.datatables.net/reference/button/edit"><code class="button" title="Editor button type">edit</code></a> and
+				<a href="//editor.datatables.net/reference/button/remove"><code class="button" title="Editor button type">remove</code></a> buttons can be used to add a cancel
+				button to the Editor form. The value given is passed directly to the <a href="//editor.datatables.net/reference/api/buttons()"><code class="api" title=
+				"Editor API method">buttons()</code></a> method, so allowed values there are also accepted by <code>formButtons</code>.</p>
+				<p>In this example we make use of that ability to provide a simple submit button (<a href="//editor.datatables.net/reference/api/buttons()"><code class="api"
+				title="Editor API method">buttons()</code></a> will automatically assign a submit action to string values) and a button that will call the <a href=
+				"//editor.datatables.net/reference/api/close()"><code class="api" title="Editor API method">close()</code></a> method to cancel the current action.</p>
+			</div>
+			<div class="demo-html">
+				<table id="example" class="display" style="width:100%">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</thead>
+					<tfoot>
+						<tr>
+							<th>Name</th>
+							<th>Position</th>
+							<th>Office</th>
+							<th>Extn.</th>
+							<th>Start date</th>
+							<th>Salary</th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		ajax: &quot;../../controllers/staff.php&quot;,
+		table: &quot;#example&quot;,
+		fields: [ {
+				label: &quot;First name:&quot;,
+				name: &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name: &quot;last_name&quot;
+			}, {
+				label: &quot;Position:&quot;,
+				name: &quot;position&quot;
+			}, {
+				label: &quot;Office:&quot;,
+				name: &quot;office&quot;
+			}, {
+				label: &quot;Extension:&quot;,
+				name: &quot;extn&quot;
+			}, {
+				label: &quot;Start date:&quot;,
+				name: &quot;start_date&quot;
+			}, {
+				label: &quot;Salary:&quot;,
+				name: &quot;salary&quot;
+			}
+		]
+	} );
+
+	var table = $('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/staff.php&quot;,
+		columns: [
+			{ 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: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;extn&quot; },
+			{ data: &quot;start_date&quot; },
+			{ data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
+		],
+		select: true,
+		buttons: [
+			{
+				extend: &quot;create&quot;,
+				editor: editor,
+				formButtons: [
+					'Create',
+					{ text: 'Cancel', action: function () { this.close(); } }
+				]
+			},
+			{
+				extend: &quot;edit&quot;,
+				editor: editor,
+				formButtons: [
+					'Edit',
+					{ text: 'Cancel', action: function () { this.close(); } }
+				]
+			},
+			{
+				extend: &quot;remove&quot;,
+				editor: editor,
+				formButtons: [
+					'Delete',
+					{ text: 'Cancel', action: function () { this.close(); } }
+				]
+			}
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css">a.marginLeft {
+		margin-left: 1em;
+	}</code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced/formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="../advanced/tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="../advanced/multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="../advanced/REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="../advanced/deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="../advanced/localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="../advanced/jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="../advanced/compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="../advanced/htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="../advanced/sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="../advanced/joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="../advanced/joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="../advanced/joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="../advanced/parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="../advanced/upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="../advanced/upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="./dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="./clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="./triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="./backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li class="active">
+								<a href="./cancelButton.html">Cancel button</a>
+							</li>
+							<li>
+								<a href="./checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="./softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="./duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="./removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

editor/examples/api/checkbox.html

@@ -0,0 +1,636 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>Editor example - Always shown checkbox</title>
+	<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+
+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/checkbox.php",
+		"table": "#example",
+		"fields": [ {
+				label:     "Active:",
+				name:      "active",
+				type:      "checkbox",
+				separator: "|",
+				options:   [
+					{ label: '', value: 1 }
+				]
+			}, {
+				label: "First name:",
+				name:  "first_name"
+			}, {
+				label: "Last name:",
+				name:  "last_name"
+			}, {
+				label: "Phone:",
+				name:  "phone"
+			}, {
+				label: "City:",
+				name:  "city"
+			}, {
+				label: "Zip:",
+				name:  "zip"
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: "Bfrtip",
+		ajax: "../../controllers/checkbox.php",
+		columns: [
+			{ data: "first_name" },
+			{ data: "last_name" },
+			{ data: "phone" },
+			{ data: "city" },
+			{ data: "zip" },
+			{
+				data:   "active",
+				render: function ( data, type, row ) {
+					if ( type === 'display' ) {
+						return '<input type="checkbox" class="editor-active">';
+					}
+					return data;
+				},
+				className: "dt-body-center"
+			}
+		],
+		select: {
+			style: 'os',
+			selector: 'td:not(:last-child)' // no row selection on last column
+		},
+		buttons: [
+			{ extend: "create", editor: editor },
+			{ extend: "edit",   editor: editor },
+			{ extend: "remove", editor: editor }
+		],
+		rowCallback: function ( row, data ) {
+			// Set the checked state of the checkbox in the table
+			$('input.editor-active', row).prop( 'checked', data.active == 1 );
+		}
+	} );
+
+	$('#example').on( 'change', 'input.editor-active', function () {
+		editor
+			.edit( $(this).closest('tr'), false )
+			.set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
+			.submit();
+	} );
+} );
+
+
+
+	</script>
+</head>
+<body class="dt-example php">
+	<div class="container">
+		<section>
+			<h1>Editor example <span>Always shown checkbox</span></h1>
+			<div class="info">
+				<p>This example shows a column with checkboxes that are always displayed and will cause a database update when their state is toggled via a click or keyboard
+				action. Although these checkboxes are not actually part of the Editor controlled elements, we can use the Editor API (specifically the <a href=
+				"//editor.datatables.net/reference/api/edit()"><code class="api" title="Editor API method">edit()</code></a>, <a href=
+				"//editor.datatables.net/reference/api/set()"><code class="api" title="Editor API method">set()</code></a> and <a href=
+				"//editor.datatables.net/reference/api/submit()"><code class="api" title="Editor API method">submit()</code></a> methods) to have Editor perform the action. This
+				can make for very fast editing when working with items that need to be toggled frequently.</p>
+				<p>A <a href="//datatables.net/blog/2014-09-09">blog post is available</a> that explains in detail how this example is constructed.</p>
+			</div>
+			<div class="demo-html">
+				<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
+					<thead>
+						<tr>
+							<th>First name</th>
+							<th>Last name</th>
+							<th>Phone</th>
+							<th>City</th>
+							<th>Zip</th>
+							<th>Active</th>
+						</tr>
+					</thead>
+				</table>
+			</div>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
+
+$(document).ready(function() {
+	editor = new $.fn.dataTable.Editor( {
+		&quot;ajax&quot;: &quot;../../controllers/checkbox.php&quot;,
+		&quot;table&quot;: &quot;#example&quot;,
+		&quot;fields&quot;: [ {
+				label:     &quot;Active:&quot;,
+				name:      &quot;active&quot;,
+				type:      &quot;checkbox&quot;,
+				separator: &quot;|&quot;,
+				options:   [
+					{ label: '', value: 1 }
+				]
+			}, {
+				label: &quot;First name:&quot;,
+				name:  &quot;first_name&quot;
+			}, {
+				label: &quot;Last name:&quot;,
+				name:  &quot;last_name&quot;
+			}, {
+				label: &quot;Phone:&quot;,
+				name:  &quot;phone&quot;
+			}, {
+				label: &quot;City:&quot;,
+				name:  &quot;city&quot;
+			}, {
+				label: &quot;Zip:&quot;,
+				name:  &quot;zip&quot;
+			}
+		]
+	} );
+
+	$('#example').DataTable( {
+		dom: &quot;Bfrtip&quot;,
+		ajax: &quot;../../controllers/checkbox.php&quot;,
+		columns: [
+			{ data: &quot;first_name&quot; },
+			{ data: &quot;last_name&quot; },
+			{ data: &quot;phone&quot; },
+			{ data: &quot;city&quot; },
+			{ data: &quot;zip&quot; },
+			{
+				data:   &quot;active&quot;,
+				render: function ( data, type, row ) {
+					if ( type === 'display' ) {
+						return '&lt;input type=&quot;checkbox&quot; class=&quot;editor-active&quot;&gt;';
+					}
+					return data;
+				},
+				className: &quot;dt-body-center&quot;
+			}
+		],
+		select: {
+			style: 'os',
+			selector: 'td:not(:last-child)' // no row selection on last column
+		},
+		buttons: [
+			{ extend: &quot;create&quot;, editor: editor },
+			{ extend: &quot;edit&quot;,   editor: editor },
+			{ extend: &quot;remove&quot;, editor: editor }
+		],
+		rowCallback: function ( row, data ) {
+			// Set the checked state of the checkbox in the table
+			$('input.editor-active', row).prop( 'checked', data.active == 1 );
+		}
+	} );
+
+	$('#example').on( 'change', 'input.editor-active', function () {
+		editor
+			.edit( $(this).closest('tr'), false )
+			.set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
+			.submit();
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
+						</li>
+						<li>
+							<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js">https://code.jquery.com/ui/1.12.1/jquery-ui.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js</a>
+						</li>
+						<li>
+							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>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:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css</a>
+						</li>
+						<li>
+							<a href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href=
+							"https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css</a>
+						</li>
+						<li>
+							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>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.</p>
+				</div>
+				<div class="php">
+					<p>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 <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../simple/simple.html">Basic initialisation</a>
+							</li>
+							<li>
+								<a href="../simple/multiRow.html">Multi-row editing</a>
+							</li>
+							<li>
+								<a href="../simple/fieldTypes.html">Field types</a>
+							</li>
+							<li>
+								<a href="../simple/fieldDefaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../simple/noAjax.html">Local table editing</a>
+							</li>
+							<li>
+								<a href="../simple/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../simple/inTableControls.html">In table form controls</a>
+							</li>
+							<li>
+								<a href="../simple/server-side-processing.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../simple/template.html">Custom form layout / templates (tags)</a>
+							</li>
+							<li>
+								<a href="../simple/template-attribute.html">Custom form layout / templates (attributes)</a>
+							</li>
+							<li>
+								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced/formOnlyData.html">Data shown only in the form</a>
+							</li>
+							<li>
+								<a href="../advanced/tableOnlyData.html">Data shown in table only</a>
+							</li>
+							<li>
+								<a href="../advanced/multiItem.html">Multi-item editing (rows, columns, cells)</a>
+							</li>
+							<li>
+								<a href="../advanced/REST.html">REST interface</a>
+							</li>
+							<li>
+								<a href="../advanced/deepObjects.html">Complex (nested) JSON data source</a>
+							</li>
+							<li>
+								<a href="../advanced/localstorage.html">Ajax override - using localStorage for the data source</a>
+							</li>
+							<li>
+								<a href="../advanced/jsonId.html">Row ID source specification</a>
+							</li>
+							<li>
+								<a href="../advanced/compoundKey.html">Compound database primary key</a>
+							</li>
+							<li>
+								<a href="../advanced/htmlTable.html">DOM sourced table</a>
+							</li>
+							<li>
+								<a href="../advanced/sqlView.html">SQL VIEW</a>
+							</li>
+							<li>
+								<a href="../advanced/joinSelf.html">Join tables - self referencing join</a>
+							</li>
+							<li>
+								<a href="../advanced/joinLinkTable.html">Join tables - link table</a>
+							</li>
+							<li>
+								<a href="../advanced/joinArray.html">Join tables - one-to-many join</a>
+							</li>
+							<li>
+								<a href="../advanced/parentChild.html">Parent child editor</a>
+							</li>
+							<li>
+								<a href="../advanced/upload.html">File upload</a>
+							</li>
+							<li>
+								<a href="../advanced/upload-many.html">File upload (many)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
+							</li>
+							<li>
+								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
+							</li>
+							<li>
+								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
+							</li>
+							<li>
+								<a href="../extensions/import.html">CSV import</a>
+							</li>
+							<li>
+								<a href="../extensions/exportButtons.html">Export buttons</a>
+							</li>
+							<li>
+								<a href="../extensions/responsive.html">Responsive table extension</a>
+							</li>
+							<li>
+								<a href="../extensions/rowReorder.html">Row reordering</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanes.html">SearchPanes Integration for Editor</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesCascade.html">SearchPanes Integration for Editor with CascadePanes</a>
+							</li>
+							<li>
+								<a href="../extensions/searchPanesViewTotal.html">SearchPanes Integration for Editor with ViewTotal</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../dates/index.html">Dates and time</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../dates/dates.html">Date picker</a>
+							</li>
+							<li>
+								<a href="../dates/formatting.html">Formatted dates (server-side)</a>
+							</li>
+							<li>
+								<a href="../dates/formatting-client.html">Formatted dates (client-side)</a>
+							</li>
+							<li>
+								<a href="../dates/datetime.html">Date and time input</a>
+							</li>
+							<li>
+								<a href="../dates/time.html">Time inputs</a>
+							</li>
+							<li>
+								<a href="../dates/time-increment.html">Time increment options</a>
+							</li>
+							<li>
+								<a href="../dates/options-min-max.html">Options - min and max dates</a>
+							</li>
+							<li>
+								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
+							</li>
+							<li>
+								<a href="../dates/options-disable-days.html">Options - disable days</a>
+							</li>
+							<li>
+								<a href="../dates/i18n.html">Internationalisation</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
+							</li>
+							<li>
+								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
+							</li>
+							<li>
+								<a href="../dates/html5.html">HTML5 date input</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../inline-editing/simple.html">Simple inline editing</a>
+							</li>
+							<li>
+								<a href="../inline-editing/tabControl.html">Tab between columns</a>
+							</li>
+							<li>
+								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
+							</li>
+							<li>
+								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
+							</li>
+							<li>
+								<a href="../inline-editing/editIcon.html">Edit icon</a>
+							</li>
+							<li>
+								<a href="../inline-editing/join.html">Joined tables</a>
+							</li>
+							<li>
+								<a href="../inline-editing/responsive.html">Responsive integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/columns.html">Selected columns only</a>
+							</li>
+							<li>
+								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
+							</li>
+							<li>
+								<a href="../inline-editing/serverSide.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/options.html">Form control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
+							</li>
+							<li>
+								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./confirmClose.html">Events - unsaved changes close confirmation</a>
+							</li>
+							<li>
+								<a href="./dependentFields.html">Dependent fields</a>
+							</li>
+							<li>
+								<a href="./clientValidation.html">Client-side validation</a>
+							</li>
+							<li>
+								<a href="./triggerButton.html">Customised control buttons</a>
+							</li>
+							<li>
+								<a href="./backNext.html">Previous / next editing buttons</a>
+							</li>
+							<li>
+								<a href="./cancelButton.html">Cancel button</a>
+							</li>
+							<li class="active">
+								<a href="./checkbox.html">Always shown checkbox</a>
+							</li>
+							<li>
+								<a href="./softDelete.html">Soft delete</a>
+							</li>
+							<li>
+								<a href="./duplicateButton.html">Duplicate button</a>
+							</li>
+							<li>
+								<a href="./removeMessage.html">Custom delete / remove message</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../standalone/index.html">Standalone</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../standalone/simple.html">Simple standalone editing</a>
+							</li>
+							<li>
+								<a href="../standalone/bubble.html">Bubble editing</a>
+							</li>
+							<li>
+								<a href="../standalone/inline.html">Inline editing</a>
+							</li>
+							<li>
+								<a href="../standalone/collection.html">Standalone collection editor</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryui.html">jQuery UI</a>
+							</li>
+							<li>
+								<a href="../styling/fieldDisplay.html">Field display styling options</a>
+							</li>
+							<li>
+								<a href="../styling/columns.html">Multi-column layout</a>
+							</li>
+							<li>
+								<a href="../styling/large.html">Large window layout</a>
+							</li>
+							<li>
+								<a href="../styling/stackedInputs.html">Stacked inputs</a>
+							</li>
+							<li>
+								<a href="../styling/envelope.html">Envelope display controller</a>
+							</li>
+							<li>
+								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
+							</li>
+							<li>
+								<a href="../styling/template.html">Custom form layout / templates</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
+							</li>
+							<li>
+								<a href="../plug-ins/displayController.html">Custom display controller</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>