Some new options and code styling

README.md

@@ -10,67 +10,70 @@ 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.
-**confirmationButton** _(optional)_| bool | 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 | 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
 ```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
                 }
             }
         ]

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>
-

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');
     }
-}
+}

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>
-

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());
-}
+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());
+}