Can you please provide an example how to add date picker for editable text box. For example I need to make sure that if i Click on Date Cell , Date picker should pop up ,so that user can select date .

Thanks!

when using confirmation buttons, if I click on multiple rows it allows for multiple edits at the same time. I'd like the update to be cancelled if the user clicks on a different cell and another is already open.
Also with confirmation buttons off (using firefox) the updatedEditableCell(within getInputHtml function) does not work with focusout. onblur works for both browsers however.
Ultimately i'd like the input to close when the user clicks on another cell (when using confirmation buttons). please advise.

I allow my datatables to be editable only after edit mode is turned on, on the page. But once this plugin is initialized, we can't unbind it to stop editing. How do I unbind it?

I define a column using render,

{
      	"render": function (data, type, row, meta) {
      		return row["status"];
      	},
 //	"data" : "status",  
     	"targets" : 2       
     }

        "inputTypes": [
            {
                "column": 2,
                "type": "textarea",
                "options": null
            }

in dataTables.cellEdit.js row 106, table.cell(this) will throw an exception.
var oldValue = table.cell(this).data();

Hi everyone,

I've an issue with the editinline on firefox and only on firefox. When I click on the field that's happend for firefox, the dropdown doesn't appear fine. I can just select the first value and others doesn't appear :

And with chrome everything works fine like that :

Everything works fine i've just this issue and i really don't know how to fix it.
Thanks a lot by advance.

Best regard,

Nassim

Hi,

How can I do or some example related to undo or redo?

On updating the cell, any HTML tags are not escaped. In my application the fields are using placeholders with < > tags, which are missing after updating.

I updated this (a bit dirty) in the _update function
newValue = jQuery('<div/>').text(newValue).html();

I am a new front-end web developer,I have a new web appliction should use AJax and import data to the a table and also should make the data editable.

I have imported data successfully,but when talked about make the datatable editable,I searched in github and found this repo.It is very cool,but can not get the purpose that I wish.

I have modified the basic.html and basic.js

I have forked the repo and modified ，here is my repo.

I run the basic.html in chrome like this .

Hi I have two datatables and is nested column
I want to have editable in two tables column
I have to initialize two different datatables as a editable column but I am facing errors like
var currentColumnIndex = table.cell(this).index().column; >> undefined

Hello!

I've been struggling to properly update the DB, I'm trying to send the data with Ajax but failed miserably, can't figure it out how to send the data inserted by the user to the php page that handles all the data.

What I need is a way to send all the data inserted by the user to a php page that will do the UPDATE on the row edited by the user.

Look at my Ajax code(it's a fricking mess because I have changed the code so many times I might have lost my mind):
`var table = $('#tableteste').DataTable();

function  myCallbackFunction(updatedCell, updatedRow, oldValue) {
    $.ajax({
        url: "include/edita.php",
        type: "POST",
        data: DONTKNOWWHATTODOHERE,
        success: function(data){
        alert(data);
        }
    });
}`

As you guys can see I don't know what to do with the data on my Ajax, tried a lot of different stuff but none worked.

On IE (tested on IE 11.192), when editing a cell, i get the following error:

Unhandled exception at line 9704, column 13 in eval code
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'closest'

In order to correct this, i replaced this line (31):

var table = $(callingElement.closest("table")).DataTable().table();

by this :

var table = $(callingElement).closest("table").DataTable().table();

I am using MakeCellsEditable() plugin on data table for editing cell. I want to make this cell input field as autocomplete search box. please guide me how can i do that?

After implementing this awesome plugin an error is shown on my console:
TypeError: table.MakeCellsEditable is not a function

Any idea why?

Here's my initialization(pretty basic):
` var table = $('#tableteste').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());
}

table.MakeCellsEditable({
    "onUpdate": myCallbackFunction
});`

I have an issue with the Datatables ColReorder function. I have a column with a list input but when I reorder the columns the inputType don't move with. Is there a way to use CellEdit with ColReorder?

Thanks

Florian

Hi!
How can I populate the list editor values from an array that I'm loading from the server? For example, in my ajax call I'm receiving the list of users:

success: function( data ){
                    allUsers = Object.assign({},data);
                    console.log(allUsers[0].username);            
                },

I can access username value by:
allUsers[0].username

Hey,
Just want to thank you for the great plugin, it is saving me a lot of work.

But I was hoping you could add some more functionality:

• The arrow keys will allow you to traverse the data table once a starting cell has been selected and pressing "Enter" on an editable cell will start editing that cell
• Pressing "Enter" on your keyboard will save the changes
• Pressing "Esc" on your keyboard will cancel the changes

Basically just hoping you could add some way to navigate through the table using the keyboard.

Thank you so much for the great plugin, hopefully you can help me out with this :)

Best plugin in table's extension.

Somehow, my table's fetching data from database, so there's no static contents written in HTML. This-in my opinion- makes every updatedRow.data()[1]'s output is Undefined. Wherever UpdatedRow.data() creates Undefined instead the existing data.

How can I fix this?

Thanks.

how to get data name? we can get id only which is not enough for editing

I saw this was an issue before, but it wasn't resolved -- I have the Datatable initialization correct and everything, but am still getting this error. Included file as well.

The callback function is not called. Is there a specific settings except "onUpdate"?

Your plugin provides an input field. How do you bring up a dropdown when the cell is being edited?

There is a typo in dataTables.cellEdit.js that is preventing the cancel button from working. The button does not go away and the text remains changed in the cell.
In the cancelEditableCell function, note this line:
var table = $(callingElement.closest("table")).DataTable().table();
It should be like this:
var table = $(callingElement).closest("table").DataTable().table();

After making this small change it is functioning properly.

I used jquery2 and with the basic example I get:
jquery-2.1.4.min.js:2 Uncaught TypeError: Cannot read property 'length' of undefined

But with the advanced example it works, must be something within getInputHtml() and

 $.each(settings.inputTypes, function (index, setting) {
        if (setting.column == currentColumnIndex) {
            inputSetting = setting;
            inputType = inputSetting.type.toLowerCase();
        }
    });

Can you please provide an example how to validate the input data? For example I need to make sure that entered data is a valid IP address and reject everything else.

Thanks!

Is there an input type for numbers?

Hello,

First off thank you very much for your work on this plugin, it is very easy to read/understand. I am not sure if intending to try and keep it working in the responsive style view (where a plus can show columns if the view is too thin for the entire table). When entering this mode, a column call on an undefined index is throwing an error. There were two options

1. Destroy the editor before entering the responsive view.

2. Add the quick hack below.

 // On cell click
        $(table.body()).on('click', 'td', function () {

That can be troublesome. My 'quick fix` was along the lines of

$(table.body()).on('click', 'td', function () {

            if (table.cell(this).index()!=undefined)
            {
                var currentColumnIndex = table.cell(this).index().column;

                // DETERMINE WHAT 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);

                    // Show input
                    if (!$(cell).find('input').length && !$(cell).find('select').length)
                    {
                        // Input CSS
                        var input = getInputHtml(currentColumnIndex, settings, oldValue);
                        $(cell).html(input.html);
                        if (input.focus)
                        {
                            $('#ejbeatycelledit').focus();
                        }
                    }
                }
            }
        });

I chose the second as it solved my issue, as the first was relatively easy for the size of the window never changing, however if a user resized their view, it was hard to handle. I am not sure if this fix is worthy of a pull request, or if the README should just specify that the responsive view will not work, but based on any feedback I can make a pull request.

Please let me know which you prefer, or if any additional clarification is necessary.

./max

Could you please provide some instructions on how to use your plugin to update data in database? Thank you

Hi,
This plugin is amazing.

Any idea to integrate this plugin to select2 ?

Thankyou very much!

I'm pretty new to Datatables so I'm trying to pick this up on the fly. I'm trying to control tab order myself and am having trouble figuring out how it's set. Once the datatable is created, the first column gets tabIndex=0 and no other columns are getting a tabindex. I have tried to put code into your "updateEditableCell" function to move it to the next editable cell (which I thought wouldn't be too hard, but I have been unsuccessful at getting it to work so far.

P.S. Thanks for writing this edit feature. It has been a great tool for me!

I woul find it very usefull to allow editing of only one cell at a time.
Hopefully i am not the only person who wishes such a usability function.

Is there a way to get the row id? I found this article on how to get the column id :
https://stackoverflow.com/questions/2384102/jquery-datatables-how-to-get-column-id

I tried : var rowIndex = updatedCell.index().row;

However this seems not to be consistent. Ie. When I click the 3rd row in my datatable I get row is equal to 0.
Any help would greatly be appreciated?

Thank you Elliott for this great plug-in for datatables. It was just what I was looking for.
When I run advanced.html and change the last name, the list box offers Beaty, Doe, Dirt.
Whichever one of these I select, the newValue is the index of my choice, and is displayed in the list, instead of the name I chose.
Is this just me or does this happen to others?
(FWIW I wrote some code that fixes the problem and added it into my copy of advanced.js.)
David Hicks

Hi,

is it possible to make a single cell or row not editable?

I have an ID row on my table and I dont want users to be able to edit it.

Thanks

Error VM192 dataTables.cellEdit.js:32 Uncaught TypeError: Cannot read property 'column' of undefined when editing first table.

jsfiddle - attempt to edit the first table.

Is it possible to disable/enable cell editing based on the row's data? For example, I have items with status "Deleted" (objects are not in the system anymore, but I 'm required to show history anyway) and I want to disable the ability to make changes for those rows. I'm already showing them as disabled with a gray background. If yes - can you please provide an example?

That's a wonderful plug-in!!

Will there be "add row/record" function?

Thanks!

Hi,

This is a great package!

One small thing - I seem to be able to edit multiple cells at the same time. Is there a way we could have an option to 'save on blur' - i.e. loss of focus?

That way as a user clicks on different cells to enter data, it keeps saving the previous cell and returns it to a normal view?

When a type list is updated, the new value in the table is the "value" but it would be better that show the "display" value of the options...

Not sure this is something I can change... thoughts on why this is occurring?

editInline.js:240 Uncaught TypeError: cellValue.replace is not a function
    at sanitizeCellValue (editInline.js:240)
    at HTMLTableCellElement.<anonymous> (editInline.js:108)
    at HTMLTableSectionElement.dispatch (datatables.min.js:14)
    at HTMLTableSectionElement.y.handle (datatables.min.js:14)

I have multiple tabs containing different datatables. Cell edit plugin works perfectly but sometimes my callback function updatedRow returns array(normally returns object)

table.row($(callingElement).parents('tr')); -- sometimes object sometimes array
Problem is when I get it like array then I dont have my datatble nonvisible column data.

Datatable doc says, returns array if is dom sourced data. But I couldnt get what it means here in callback update.

Thanks

Firefox does not support onfocusout event.
Please, use onblur instead.

I have a page with multiple (4) DataTables all of which I have enabled CellEdit on. It works great and the parameters are all independently working except for the onUpdate calls! No matter what I try the first table to register an onUpdate function causes all of the other tables to submit edits to that callback instead of their respective callbacks.

Hi,

I want to know if someonelse add the "datetime" type in the input type.
I have tried to add it without success :(

So if someone can help me, it will be a pleasure.

Thank you by advance.

I noticed that when you edit a field on any page other than the first page I am sent to the first page.

Is it possible to Enable/Disable columns on the fly?

Hi!!
First thing thanks for the great plugin.

I am trying to make custom conditioning functions when tries to edit a cell value.
For example: If value (numeric) typed is higher than the defined maximum possible for this case (I have this number), then return error.

How can this be done?

Additionally, I have only one editable cell per row. How could I jump to next editable cell (next row) when the user changed one cell value?

Thank you very much!
Greetings from Brazil

`var oTable = $('#tb').DataTable({
"bProcessing": true,
"bServerSide": true,
"responsive": true,
"sAjaxSource": '/courses/view_data',
"bJQueryUI": false,
"dom": 'T<"clear">lfrtip<"clear spacer">',
"tableTools": {
"sSwfPath": "datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
},
"sPaginationType": "full_numbers",
"iDisplayStart ": 10,
"aoColumns": [{
"mData": "name"
}, {
"mData": "category"
}, {
"mData": "cost"
}, {
"mData": "date_created"
}, {
"mData": "user_created_id"
}, {
"mData": "date_updated"
}, {
"mData": "user_updated_id"
}],

        "order": [[ 0, "desc" ]],
        "oLanguage": {
            "sProcessing": "<img src='<?= locationUpload('url');?>/ajax-loader.gif'>"
        },
        'fnServerData': function (sSource, aoData, fnCallback) {
            $.ajax
            ({
                'dataType': 'json',
                'type': 'GET',
                'url': sSource,
                'data': aoData,
                'success': fnCallback
            });
        }
    });

    oTable.MakeCellsEditable({
    "onUpdate": myCallbackFunction,
    "inputCss":'my-input-class',
    "columns": [0,1,2],
    "confirmationButton": { // could also be true
        "confirmCss": 'my-confirm-class',
        "cancelCss": 'my-cancel-class'
    },
    "inputTypes": []
});
});

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());`

On IE (tested on IE 11.192), when a table does not have any row, IE throws the following error:

Unhandled exception at line 1186, column 13 in eval code
0x800a138f - JavaScript runtime error: Unable to get property 'column' of undefined or null reference

The error is caused by line 98:
var currentColumnIndex = table.cell(this).index().column;

To correct it, I've changed to:

var index = table.cell(this).index();
if(index){
    var currentColumnIndex = index.column;
    ....
}

I have added input type textarea in the list to support enter key text to start a new line. All thing works fine except the error class of border on textarea is not applying.