From 0ee56daa307d202aa5241ef478066be3535397df Mon Sep 17 00:00:00 2001
From: Peter van der Leek <petervdleek@gmail.com>
Date: Sat, 1 Oct 2016 10:42:33 +0200
Subject: [PATCH 1/5] Added options for confirmButton, cancelButton and
 buttonText (datepicker) Several code styling improvements

---
 README.md                 |  67 +++++++++--------
 example/advanced.html     |   2 -
 example/advanced.js       |  65 +++++++++--------
 example/basic.html        |   1 -
 example/basic.js          |  12 +--
 js/dataTables.cellEdit.js | 149 ++++++++++++++++++++++----------------
 6 files changed, 160 insertions(+), 136 deletions(-)

diff --git a/README.md b/README.md
index 294cedb..bb582b1 100644
--- a/README.md
+++ b/README.md
@@ -21,56 +21,59 @@ Property | Type | Default | Example | Details
 ```javascript
     var table = $('#myTable').DataTable();
 
-    function myCallbackFunction (updatedCell, updatedRow, oldValue) {
-        console.log("The new value for the cell is: " + updatedCell.data());
-        console.log("The values for each cell in that row are: " + updatedRow.data());
+    function myCallbackFunction (updatedCell, updatedRow, oldValue, newValue) {
+        console.log('The new value for the cell is: ' + newValue);
+        console.log('The values for each cell in that row are: ' + updatedRow.data());
     }
 
     table.MakeCellsEditable({
-        "onUpdate": myCallbackFunction
+        'onUpdate': myCallbackFunction
     });
 ```
 ### Advanced Initialization
 ```javascript
     var table = $('#myAdvancedTable').DataTable();
 
-    function  myCallbackFunction(updatedCell, updatedRow, oldValue) {
-        console.log("The new value for the cell is: " + updatedCell.data());
-        console.log("The values for each cell in that row are: " + updatedRow.data());
+    function  myCallbackFunction(updatedCell, updatedRow, oldValue, newValue) {
+        console.log('The new value for the cell is: ' + newValue);
+        console.log('The values for each cell in that row are: ' + updatedRow.data());
     }
 
     table.MakeCellsEditable({
-        "onUpdate": myCallbackFunction,
-        "inputCss":'my-input-class',
-        "columns": [0,1,2],
-        "allowNulls": {
-            "columns": [1],
-            "errorClass": 'error'
+        'onUpdate': myCallbackFunction,
+        'inputCss': 'my-input-class',
+        'columns': [0,1,2],
+        'allowNulls': {
+            'columns': [1],
+            'errorClass': 'error'
         },
-        "confirmationButton": { 
-            "confirmCss": 'my-confirm-class',
-            "cancelCss": 'my-cancel-class'
+        'confirmationButton': {
+            'confirmButton': 'Save changes',
+            'confirmCss': 'my-confirm-class',
+            'cancelButton': 'No thanks',
+            'cancelCss': 'my-cancel-class'
         },
-		"inputTypes": [
+		'inputTypes': [
             {
-				"column":0, 
-				"type":"text", 
-				"options":null 
+				'column':0, 
+				'type': 'text', 
+				'options': null 
 			}, 
             {
-                "column":1, 
-                "type": "list",
-                "options":[
-                    { "value": "1", "display": "Beaty" },
-                    { "value": "2", "display": "Doe" },
-                    { "value": "3", "display": "Dirt" }
+                'column': 1, 
+                'type': 'list',
+                'options': [
+                    { 'value': '1', 'display': 'Beaty' },
+                    { 'value': '2', 'display': 'Doe' },
+                    { 'value': '3', 'display': 'Dirt' }
                 ]
-            }
-			,{
-                "column": 2,
-                "type": "datepicker", // requires jQuery UI: http://http://jqueryui.com/download/
-                "options": {
-                    "icon": "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" // Optional
+            },
+			{
+                'column': 2,
+                'type': 'datepicker', // requires jQuery UI: http://http://jqueryui.com/download/
+                'options': {
+                    'icon': 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif', // Optional
+                    'buttonText': 'Select a date' // Optional
                 }
             }
         ]
diff --git a/example/advanced.html b/example/advanced.html
index e13cab1..05ccfe2 100644
--- a/example/advanced.html
+++ b/example/advanced.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-    
     <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
     <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
     <style>
@@ -126,4 +125,3 @@
 <script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
 <script src="../js/dataTables.cellEdit.js"></script>
 <script src="advanced.js"></script>
-
diff --git a/example/advanced.js b/example/advanced.js
index 076260a..213a086 100644
--- a/example/advanced.js
+++ b/example/advanced.js
@@ -2,55 +2,56 @@
 $(document).ready(function () {
     table = $('#myAdvancedTable').DataTable();
     table.MakeCellsEditable({
-        "onUpdate": myCallbackFunction,
-        "inputCss":'my-input-class',
-        "columns": [0,1,2,3],
-        "allowNulls": {
-            "columns": [3],
-            "errorClass": 'error'
+        'onUpdate': myCallbackFunction,
+        'inputCss': 'my-input-class',
+        'columns': [0, 1, 2, 3],
+        'allowNulls': {
+            'columns': [3],
+            'errorClass': 'error'
         },
-        "confirmationButton": { // could also be true
-            "confirmCss": 'my-confirm-class',
-            "cancelCss": 'my-cancel-class'
+        'confirmationButton': { // could also be true
+            'confirmButton': 'Save changes',
+            'confirmCss': 'my-confirm-class',
+            'cancelButton': 'No thanks',
+            'cancelCss': 'my-cancel-class'
         },
-        "inputTypes": [
+        'inputTypes': [
             {
-                "column": 0,
-                "type": "text",
-                "options": null
+                'column': 0,
+                'type': 'text',
+                'options': null
             },
             {
-                "column":1, 
-                "type": "list",
-                "options":[
-                    { "value": "1", "display": "Beaty" },
-                    { "value": "2", "display": "Doe" },
-                    { "value": "3", "display": "Dirt" }
+                'column': 1,
+                'type': 'list',
+                'options': [
+                    { 'value': '1', 'display': 'Beaty' },
+                    { 'value': '2', 'display': 'Doe' },
+                    { 'value': '3', 'display': 'Dirt' }
                 ]
             },
             {
-                "column": 2,
-                "type": "datepicker", // requires jQuery UI: http://http://jqueryui.com/download/
-                "options": {
-                    "icon": "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" // Optional
+                'column': 2,
+                'type': 'datepicker', // requires jQuery UI: http://http://jqueryui.com/download/
+                'options': {
+                    'icon': 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif', // Optional
+                    'buttonText': 'Select a date' // Optional
                 }
             }
-             // Nothing specified for column 3 so it will default to text
-            
+            // Nothing specified for column 3 so it will default to text
         ]
     });
-
 });
 
-function myCallbackFunction (updatedCell, updatedRow, oldValue) {
-    console.log("The new value for the cell is: " + updatedCell.data());
-    console.log("The old value for that cell was: " + oldValue);
-    console.log("The values for each cell in that row are: " + updatedRow.data());
+function myCallbackFunction (updatedCell, updatedRow, oldValue, newValue) {
+    console.log('The new value for the cell is: ' + newValue);
+    console.log('The old value for that cell was: ' + oldValue);
+    console.log('The values for each cell in that row are: ' + updatedRow.data());
 }
 
 function destroyTable() {
     if ($.fn.DataTable.isDataTable('#myAdvancedTable')) {
         table.destroy();
-        table.MakeCellsEditable("destroy");
+        table.MakeCellsEditable('destroy');
     }
-}
\ No newline at end of file
+}
diff --git a/example/basic.html b/example/basic.html
index 96570ca..d67cad7 100644
--- a/example/basic.html
+++ b/example/basic.html
@@ -51,4 +51,3 @@
 <script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
 <script src="../js/dataTables.cellEdit.js"></script>
 <script src="basic.js"></script>
-
diff --git a/example/basic.js b/example/basic.js
index 6cdd1cc..8d86538 100644
--- a/example/basic.js
+++ b/example/basic.js
@@ -2,12 +2,12 @@
     var table = $('#myTable').DataTable();
 
     table.MakeCellsEditable({
-        "onUpdate": myCallbackFunction
+        'onUpdate': myCallbackFunction
     });
 });
 
-function myCallbackFunction(updatedCell, updatedRow, oldValue) {
-    console.log("The new value for the cell is: " + updatedCell.data());
-    console.log("The old value for that cell was: " + oldValue);
-    console.log("The values for each cell in that row are: " + updatedRow.data());
-}
\ No newline at end of file
+function myCallbackFunction(updatedCell, updatedRow, oldValue, newValue) {
+    console.log('The new value for the cell is: ' + newValue);
+    console.log('The old value for that cell was: ' + oldValue);
+    console.log('The values for each cell in that row are: ' + updatedRow.data());
+}
diff --git a/js/dataTables.cellEdit.js b/js/dataTables.cellEdit.js
index 9b40581..b618332 100644
--- a/js/dataTables.cellEdit.js
+++ b/js/dataTables.cellEdit.js
@@ -25,14 +25,13 @@ jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
     var table = this.table();
 
     jQuery.fn.extend({
-        // UPDATE
         updateEditableCell: function (callingElement) {
             // Need to redeclare table here for situations where we have more than one datatable on the page. See issue6 on github
-            var table = $(callingElement.closest("table")).DataTable().table();
+            var table = $(callingElement.closest('table')).DataTable().table();
             var row = table.row($(callingElement).parents('tr'));
             var cell = table.cell($(callingElement).parent());
             var columnIndex = cell.index().column;
-            var inputField =getInputField(callingElement);
+            var inputField = getInputField(callingElement);
 
             // Update
             var newValue = inputField.val();
@@ -45,67 +44,63 @@ jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
                     } else {
                         _addValidationCss();
                     }
-                    // No columns allow null
                 } else if (!newValue) {
+                    // No columns allow null
                     _addValidationCss();
                 }
-                //All columns allow null
             } else {
+                // All columns allow null
                 _update(newValue);
             }
+
             function _addValidationCss() {
                 // Show validation error
                 if (settings.allowNulls.errorClass) {
                     $(inputField).addClass(settings.allowNulls.errorClass)
                 } else {
-                    $(inputField).css({ "border": "red solid 1px" })
+                    $(inputField).css({ 'border': 'red solid 1px' })
                 }
             }
+
             function _update(newValue) {
                 var oldValue = cell.data();
                 cell.data(newValue);
-                //Return cell & row.
-                settings.onUpdate(cell, row, oldValue);
+                // Return cell, row and new value.
+                settings.onUpdate(cell, row, oldValue, newValue);
             }
-            // Get current page
+
+            // Get current page and redraw the datatable
             var currentPageIndex = table.page.info().page;
-            
-            //Redraw table
             table.page(currentPageIndex).draw(false);
         },
-        // CANCEL
+
         cancelEditableCell: function (callingElement) {
-            var table = $(callingElement.closest("table")).DataTable().table();
+            var table = $(callingElement.closest('table')).DataTable().table();
             var cell = table.cell($(callingElement).parent());
             // Set cell to it's original value
-            cell.data(cell.data())
+            cell.data(cell.data());
 
-            // Redraw table
-            table.draw();
+            // Get current page and redraw the datatable
+            var currentPageIndex = table.page.info().page;
+            table.page(currentPageIndex).draw(false);
         }
     });
 
     // Destroy
-    if (settings === "destroy") {
-        $(table.body()).off("click", "td");
+    if (settings === 'destroy') {
+        $(table.body()).off('click', 'td');
         table = null;
     }
 
     if (table != null) {
         // On cell click
         $(table.body()).on('click', 'td', function () {
-
             var currentColumnIndex = table.cell(this).index().column;
 
-            // DETERMINE WHAT COLUMNS CAN BE EDITED
+            // Determine which columns can be edited
             if ((settings.columns && settings.columns.indexOf(currentColumnIndex) > -1) || (!settings.columns)) {
-                var row = table.row($(this).parents('tr'));
-                editableCellsRow = row;
-
                 var cell = table.cell(this).node();
-                var oldValue = table.cell(this).data();
-                // Sanitize value
-                oldValue = sanitizeCellValue(oldValue);
+                var oldValue = sanitizeCellValue(table.cell(this).data());
 
                 // Show input
                 if (!$(cell).find('input').length && !$(cell).find('select').length) {
@@ -119,15 +114,13 @@ jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
             }
         });
     }
-    
 });
 
 function getInputHtml(currentColumnIndex, settings, oldValue) {
-    var inputSetting, inputType, input, inputCss, confirmCss, cancelCss;
+    var inputSetting, inputType, input = { 'focus': true, 'html': null }, inputCss;
+    var confirmButton = 'Confirm', confirmCss, cancelButton = 'Cancel', cancelCss;
 
-    input = {"focus":true,"html":null}
-
-    if(settings.inputTypes){
+    if (settings.inputTypes) {
 		$.each(settings.inputTypes, function (index, setting) {
 			if (setting.column == currentColumnIndex) {
 				inputSetting = setting;
@@ -136,14 +129,23 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
 		});
 	}
     
-    if (settings.inputCss) { inputCss = settings.inputCss; }
+    if (settings.inputCss) {
+        inputCss = settings.inputCss;
+    }
     if (settings.confirmationButton) {
+        if (settings.confirmationButton.hasOwnProperty('confirmButton')) {
+            confirmButton = settings.confirmationButton.confirmButton;
+        }
         confirmCss = settings.confirmationButton.confirmCss;
+        if (settings.confirmationButton.hasOwnProperty('cancelButton')) {
+            confirmButton = settings.confirmationButton.cancelButton;
+        }
         cancelCss = settings.confirmationButton.cancelCss;
-        inputType = inputType + "-confirm";
+        inputType = inputType + '-confirm';
     }
+
     switch (inputType) {
-        case "list":
+        case 'list':
             input.html = "<select class='" + inputCss + "' onchange='$(this).updateEditableCell(this);'>";
             $.each(inputSetting.options, function (index, option) {
                 input.html = input.html + "<option value='" + option.value + "' >" + option.display + "</option>"
@@ -151,47 +153,66 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
             input.html = input.html + "</select>";
             input.focus = false;
             break;
-        case "list-confirm": // List w/ confirm
+        case 'list-confirm':
+            // List with confirmation
             input.html = "<select class='" + inputCss + "'>";
             $.each(inputSetting.options, function (index, option) {
                 input.html = input.html + "<option value='" + option.value + "' >" + option.display + "</option>"
             });
-            input.html = input.html + "</select>&nbsp;<a href='#' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this);'>Confirm</a> <a href='#' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a> ";
+            input.html = input.html + "</select> <a href='#' class='" + confirmCss +
+                "' onclick='$(this).updateEditableCell(this);'>" + confirmButton + "</a> <a href='#' class='" +
+                cancelCss + "' onclick='$(this).cancelEditableCell(this)'>" + cancelButton + "</a> ";
             input.focus = false;
             break;
-        case "datepicker": //Both datepicker options work best when confirming the values
-        case "datepicker-confirm":
+        case 'datepicker':
+        case 'datepicker-confirm':
+            // Both datepicker options work best when confirming the values
             // Makesure jQuery UI is loaded on the page
             if (typeof jQuery.ui == 'undefined') {
-                alert("jQuery UI is required for the DatePicker control but it is not loaded on the page!");
+                alert('jQuery UI is required for the DatePicker control but it is not loaded on the page!');
                 break;
             }
-	        jQuery(".datepick").datepicker("destroy");
-	        input.html = "<input id='ejbeatycelledit' type='text' name='date' class='datepick " + inputCss + "'   value='" + oldValue + "'></input> &nbsp;<a href='#' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='#' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>";
-	        setTimeout(function () { //Set timeout to allow the script to write the input.html before triggering the datepicker 
-	            var icon = "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif";
+	        jQuery('.datepick').datepicker('destroy');
+	        input.html = "<input id='ejbeatycelledit' type='text' name='date' class='datepick " + inputCss +
+                "' value='" + oldValue + "' /> <a href='#' class='" + confirmCss +
+                "' onclick='$(this).updateEditableCell(this)'>" + confirmButton + "</a> <a href='#' class='" +
+                cancelCss + "' onclick='$(this).cancelEditableCell(this)'>" + cancelButton + "</a>";
+
+            // Set timeout to allow the script to write the input.html before triggering the datepicker
+            setTimeout(function () {
+	            var icon = 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif';
+                var buttonText = 'Select date';
                 // Allow the user to provide icon 
 	            if (typeof inputSetting.options !== 'undefined' && typeof inputSetting.options.icon !== 'undefined') {
 	                icon = inputSetting.options.icon;
 	            }
-	            var self = jQuery('.datepick').datepicker(
-                    {
-                        showOn: "button",
-                        buttonImage: icon,
-                        buttonImageOnly: true,
-                        buttonText: "Select date"
-                    });
-
-	        },100);
+                // Allow the user to provide button text
+                if (typeof inputSetting.options !== 'undefined'
+                    && typeof inputSetting.options.buttonText !== 'undefined'
+                ) {
+                    buttonText = inputSetting.options.buttonText;
+                }
+
+	            var self = jQuery('.datepick').datepicker({
+                    'showOn': 'button',
+                    'buttonImage': icon,
+                    'buttonImageOnly': true,
+                    'buttonText': buttonText
+                });
+	        }, 100);
 	        break;
-        case "text-confirm": // text input w/ confirm
-            input.html = "<input id='ejbeatycelledit' class='" + inputCss + "' value='"+oldValue+"'></input>&nbsp;<a href='#' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='#' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a> ";
-            break;
-        case "undefined-confirm": // text input w/ confirm
-            input.html = "<input id='ejbeatycelledit' class='" + inputCss + "' value='" + oldValue + "'></input>&nbsp;<a href='#' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='#' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a> ";
+        case 'text-confirm':
+        case 'undefined-confirm':
+            // Text input with confirmation
+            input.html = "<input id='ejbeatycelledit' class='" + inputCss + "' value='" + oldValue +
+                "' /><a href='#' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>" +
+                confirmButton + "</a> <a href='#' class='" + cancelCss +
+                "' onclick='$(this).cancelEditableCell(this)'>" + cancelButton + "</a> ";
             break;
-        default: // text input
-            input.html = "<input id='ejbeatycelledit' class='" + inputCss + "' onfocusout='$(this).updateEditableCell(this)' value='" + oldValue + "'></input>";
+        default:
+            // Text input
+            input.html = "<input id='ejbeatycelledit' class='" + inputCss +
+                "' onfocusout='$(this).updateEditableCell(this)' value='" + oldValue + "' />";
             break;
     }
     return input;
@@ -201,7 +222,8 @@ function getInputField(callingElement) {
     // Update datatables cell value
     var inputField;
     switch ($(callingElement).prop('nodeName').toLowerCase()) {
-        case 'a': // This means they're using confirmation buttons
+        case 'a':
+            // This means they're using confirmation buttons
             if ($(callingElement).siblings('input').length > 0) {
                 inputField = $(callingElement).siblings('input');
             }
@@ -211,19 +233,20 @@ function getInputField(callingElement) {
             break;
         default:
             inputField = $(callingElement);
+            break;
     }
     return inputField;
 }
 
 function sanitizeCellValue(cellValue) {
     if (typeof (cellValue) === 'undefined' || cellValue === null || cellValue.length < 1) {
-        return "";
+        return '';
     }
 
     // If not a number
     if (isNaN(cellValue)) {
-        // escape single quote
-        cellValue = cellValue.replace(/'/g, "&#39;");
+        // Escape single quote
+        cellValue = cellValue.replace(/'/g, '&#39;');
     }
     return cellValue;
 }

From d384f2739b3efaaff29b410f4942a844cea7e03d Mon Sep 17 00:00:00 2001
From: Peter van der Leek <petervdleek@gmail.com>
Date: Sat, 1 Oct 2016 10:43:44 +0200
Subject: [PATCH 2/5] Added options for confirmButton, cancelButton and
 buttonText (datepicker) Several code styling improvements

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bb582b1..c9fd4af 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ This plugin allows cells within a [DataTable](https://datatables.net/) to be edi
 ##### Settings { JSON Object  }
 Property | Type | Default | Example | Details  
 :------ | :------ | :------ | :-----| :------
-**onUpdate** | function |  | ```function(cell, row, oldValue){ } ``` | The call back function to be executed. The updated **[cell](https://datatables.net/reference/api/cell())**, **[row](https://datatables.net/reference/api/row())**, and previous value in that cell are passed as arguements. 
+**onUpdate** | function |  | ```function(cell, row, oldValue, newValue){ } ``` | The call back function to be executed. The updated **[cell](https://datatables.net/reference/api/cell())**, **[row](https://datatables.net/reference/api/row())**, and previous value in that cell are passed as arguments. 
 **inputCss** _(optional)_| string | none |```'my-css-class'```| A CSS class that will be applied to the input field
 **columns** _(optional)_| array | All columns |```[0,1,3,4]```| An array of column indexes defining the columns that you want to be editable.
 **allowNulls** _(optional)_| object | false | ```{ "columns": [4], "errorClass":"my-error"}``` | Determines which columns should allow null values to be entered and what CSS to apply if user input fails validation. If **errorClass** is null a default error class will be applied.

From 115092af739a0fc299336d0b515934811f30bf9e Mon Sep 17 00:00:00 2001
From: Peter van der Leek <petervdleek@gmail.com>
Date: Sat, 1 Oct 2016 10:44:48 +0200
Subject: [PATCH 3/5] Added options for confirmButton, cancelButton and
 buttonText (datepicker) Several code styling improvements

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c9fd4af..8eca7c9 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Property | Type | Default | Example | Details
 **inputCss** _(optional)_| string | none |```'my-css-class'```| A CSS class that will be applied to the input field
 **columns** _(optional)_| array | All columns |```[0,1,3,4]```| An array of column indexes defining the columns that you want to be editable.
 **allowNulls** _(optional)_| object | false | ```{ "columns": [4], "errorClass":"my-error"}``` | Determines which columns should allow null values to be entered and what CSS to apply if user input fails validation. If **errorClass** is null a default error class will be applied.
-**confirmationButton** _(optional)_| bool &#124; object | false | ```{"confirmClass":"button"}``` | Will cause two links to appear after the input; _"Confirm"_ and _"Cancel"_. User input will not be accepted until _"Confirm"_ is clicked by the user. You can optionally pass in an object with **confirmCss** and **cancelCss** properties instead of boolean. These propertiesspecify the CSS classes that should be applied to the _Confirm_ and _Cancel_ anchor tags.
+**confirmationButton** _(optional)_| bool &#124; object | false | ```{"confirmClass":"button"}``` | Will cause two links to appear after the input; _"Confirm"_ and _"Cancel"_. User input will not be accepted until _"Confirm"_ is clicked by the user. You can optionally pass in an object with **confirmButton**, **confirmCss**, **cancelButton** and **cancelCss** properties instead of boolean. These properties specify the button names and CSS classes that should be applied to the _Confirm_ and _Cancel_ anchor tags.
 **inputTypes** _(optional)_ | object array | text |  "inputTypes": [{"column":0, "type":"text", "options":null }] | Allows you to change the type of input that appears (IE dropdown or text). As different types of inputs are added I will update the advanced initialization example below with examples.
 
 ### Basic Initialization

From 4400077d5a522d528dce2090fc610ef31b6ff9fc Mon Sep 17 00:00:00 2001
From: Peter van der Leek <petervdleek@gmail.com>
Date: Sat, 1 Oct 2016 10:58:27 +0200
Subject: [PATCH 4/5] Update dataTables.cellEdit.js

---
 js/dataTables.cellEdit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/dataTables.cellEdit.js b/js/dataTables.cellEdit.js
index b618332..2400a2f 100644
--- a/js/dataTables.cellEdit.js
+++ b/js/dataTables.cellEdit.js
@@ -138,7 +138,7 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
         }
         confirmCss = settings.confirmationButton.confirmCss;
         if (settings.confirmationButton.hasOwnProperty('cancelButton')) {
-            confirmButton = settings.confirmationButton.cancelButton;
+            cancelButton = settings.confirmationButton.cancelButton;
         }
         cancelCss = settings.confirmationButton.cancelCss;
         inputType = inputType + '-confirm';

From a8b5693815913af8762fcea235d70041ecd76ba1 Mon Sep 17 00:00:00 2001
From: Peter van der Leek <petervdleek@gmail.com>
Date: Sat, 1 Oct 2016 11:03:13 +0200
Subject: [PATCH 5/5] #18 multiple input boxes open when using confirm buttons

---
 js/dataTables.cellEdit.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/js/dataTables.cellEdit.js b/js/dataTables.cellEdit.js
index b618332..b313c08 100644
--- a/js/dataTables.cellEdit.js
+++ b/js/dataTables.cellEdit.js
@@ -79,10 +79,6 @@ jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
             var cell = table.cell($(callingElement).parent());
             // Set cell to it's original value
             cell.data(cell.data());
-
-            // Get current page and redraw the datatable
-            var currentPageIndex = table.page.info().page;
-            table.page(currentPageIndex).draw(false);
         }
     });
 
@@ -99,6 +95,12 @@ jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
 
             // Determine which columns can be edited
             if ((settings.columns && settings.columns.indexOf(currentColumnIndex) > -1) || (!settings.columns)) {
+                // Check if another edit is in progress
+                var editElement = $('#ejbeatycelledit');
+                if (editElement.length) {
+                    $(editElement).cancelEditableCell(editElement);
+                }
+
                 var cell = table.cell(this).node();
                 var oldValue = sanitizeCellValue(table.cell(this).data());
 
@@ -212,7 +214,7 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
         default:
             // Text input
             input.html = "<input id='ejbeatycelledit' class='" + inputCss +
-                "' onfocusout='$(this).updateEditableCell(this)' value='" + oldValue + "' />";
+                "' onblur='$(this).updateEditableCell(this)' value='" + oldValue + "' />";
             break;
     }
     return input;