diff --git a/README.md b/README.md index 294cedb..8eca7c9 100644 --- a/README.md +++ b/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 } } ] 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 @@
-