ejbeaty / celledit Goto Github PK
View Code? Open in Web Editor NEWAllows datatable cells to be edited inline
Allows datatable cells to be edited inline
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();
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
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 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?
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.
The callback function is not called. Is there a specific settings except "onUpdate"?
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.
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 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.
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
Could you please provide some instructions on how to use your plugin to update data in database? Thank you
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?
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
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();
}
});
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
Hi,
How can I do or some example related to undo or redo?
Your plugin provides an input field. How do you bring up a dropdown when the cell is being edited?
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)
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
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
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
Destroy the editor before entering the responsive view.
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
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.
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!
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;
....
}
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...
`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());`
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?
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 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();
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 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();
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!!
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
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!
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.
Firefox does not support onfocusout event.
Please, use onblur instead.
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!
Hi,
This plugin is amazing.
Any idea to integrate this plugin to select2 ?
Thankyou very much!
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?
That's a wonderful plug-in!!
Will there be "add row/record" function?
Thanks!
Is it possible to Enable/Disable columns on the fly?
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 .
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.
how to get data name? we can get id only which is not enough for editing
I noticed that when you edit a field on any page other than the first page I am sent to the first page.
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:
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 :)
Is there an input type for numbers?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.