koalyptus supports this item


79 comments found.

I looked through the documentation and the samples, but could not find any example as follows: An editable table cell in an ‘added row’ has a button that when pressed writes mysql NOW to the database then refreshes to a human readable time value in the cell (the button disappears and is replaced by HH:ii) Is there such a beastie in your code or am I off to write a custom? Many thanx!

Hi ken_minchau,

I am afraid, you will need to create your own logic for this one, there is no such a feature as described above.


Did it Thanx!

Sorry to pester, One thing that I can’t seem to get right. When I ‘insert’ a record using Demo 2, the row seems to be written to the db at the same time as the ’+’ key is pressed. In my code, it does not. If I add a row, it does not write to the db unless I click on another row and cell, then click off that row and cell. Thus, new records get written with the default values, and nothing else. I would like the same response to add a row as Demo 2 but can’t figure it out.

Nope, didn’t work. I copy-pasta it inot the code (replaced ; with , ) and same behaviour. All is ok, I will live with it. MAny thanx!

Uhhmm, you shouldn’t replace ; with , that’s a syntax error…

Replaced with ; and it still doesn’t do what I needed. I found a different set of switches that almost work perfect. Still need to push two buttons. Works ok this way. Thanx for you patience with this newbie.

Hello in the zip file there are also php example?

Hi @sergio57, the zip does not come with PHP files. You can find some examples on the script’s website, for example: http://edittable.free.fr/ajax.php This is not a PHP/SQL solution, this is only a javascript plugin which can work with any server-side technology.

Hi I want to know if this table can be used in my website (built with django framework) andconfirm that column edit is only possible server side (thus by the admin). Is the installation procedure tutorial different in case of django framework website? Thanks

Ciao lucbran,

This is a pure javascript plugin, there shouldn’t be valid reasons preventing you from using a client-side script whatever server side technology (python, php, java, c# etc. etc.) or framework (django in your case) you use in your website.

Make sure you satisfy those requirements:

1. have a HTML table, whatever way you generate it does not matter php, django etc. static HTML, xml/xsl transformation etc, the important thing is to output a regular HTML table

2. have server-side endpoints the script will submit data changes to. The ezEdiTable plugin enables you to change table data inline on the client but then if you want to persist the changes you need server side endpoints of course.

There is no particular installation procedure for django or any other framework, you just need to place the plugin folder in your website and import the javascript and stylesheet in your page, that’s all.



My Purchase code: 15fadbac-029b-437e-9ec3-ee200c3f7100 – 16 Mar 2016

I am trying to use mysql db and and have created a test page in php with update, insert and delete scripts. The data is not saved in the table. I wanted to attached those files to show where I am making mistake. Is there a way that I can attach those files to get your feedback.

Have been trying to get a custom editor to work (in particular, anytime.5.1.2) but cannot get it to recognize. I even tried the example for the datepick (or datepicker) using the code in the samples. I could not find any reference in the documentation for a ‘custom’ type editor. This is what I need…I read to the table from mysql a datestamp and convert it into a human readable string to dispaly in a table cell.. I want to be able to select the cell, edit it using anytime and then write to the db. I must be missing something simple. The demo has the line { type: ‘custom’, target: ‘datePick’ }, and I cannot find any reference in the code below it for datePick, just datePicker. Is there any further documentation on the ‘custom’ editor type? (Perhaps an example somewhere?) Fantastic tool this ezEditTable, really using it for my site and my users at the gliding club really like it (you make me look like a hero)

datePick is simply the ID of the DOM element containing the third party date picker, look at the HTML of the demo page in your browser and you will see this block:
                <!-- START DATE PICKER THIRD PARTY SCRIPT -->    
        <div id="datePick" style="display:none; z-index:10000;" />
        <script type="text/javascript" language="javascript">

You also need to define the following callbacks in the configuration:

- open_custom_editor

- close_custom_editor

- get_custom_editor_value

- set_custom_editor_value

They instruct the plugin how to (in the order):

- open the custom editor

- close the custom editor

- retrieve the custom editor value

- set a custom editor value

It is the developer’s responsibility to define this interface with custom code, the plugin cannot know how a third party plugin works.

Reading through the other comments, I found that 3 years ago johartma asked about hidden fields. I have the exact same issue and am wondering if you had a chance to define the option values separately in the configuration object (like a input type=’hidden’) Same idea as johartma, I want to be able to select by name, and be able to send the name and the id to the mysql query. I just got to get the hidden value through to the next page. Any ideas if there is no functionality? Thanx in advance. Ken

Hi ken_minchau, no there is no ‘hidden’ type cell editor but a ‘none’ type. Please be aware you have a whole set of callbacks for each action (insert, update, delete) as described in the documentation at the ‘Actions callback events’ section. So you could implement your own logic to submit the data to the server with those delegates ‘on_update_submit’ and ‘on_insert_submit’ and add the additional field you want to pass to the server. Or use the ‘on_before_submit’ callback to parse the treated rows and add the field you need to pass to the server.

how can i freeze header row or column?

This plugin currently does not support header and/or column freezing. You will need to implement your own CSS solution.

Hello !

Thanks a lot for this really useful script. I feel free to contact you as long as I saw no discussion to fix my problem on the website or here.

I am using a tableFilter script with ezEditable extension. Everything is working fine except that when I put accents in a field, it gets transformed.

F.E : CLERJUSé becomes : CLERJUSé on the update PHP file

I 1st tried to figure out what was going wront on my servor but i don’t have this problem with regular forms. PLUS : I had a few searches on the web, added header( ‘content-type: text/html; charset=iso-8859-1’ ); to my update file, tried to use urldecode($_POST[‘XXX’]) on my update page but still no solution…

I Guess that it’s actually a very simple problem with simple explanaition and turnaround so that’s why I’m contacting you today :)

thanks in advance for your help !

Cool, if you are happy with this consider rating the script and/or author. A bientot

setting UTF8 in both sender and update page did the trick. the string is OK on the UpdateCell.php page. Otherwise my table is latin1 encoded. Is there any way to set the url char encoding to latin 1 aswell ?

At the best of my knowledge, I don’t think it is possible to specify an encoding type for a URL encoding. Cheers

Hello! I got your javascript to work on a project of mine but i can’t see anywhere any documentation on how to save the edited values from the table. Here is my configuration on the script:

var products_Config = {
                        base_path: '',
                        editable: true,
                        auto_save: false,
                            { type: 'none'},
                            { type: 'none'},
                            { type: 'input'},
                            { type: 'input'},
                            { type: 'textarea'},
                            { type: 'none' },
                            { type: 'command',
                                    enable: ['update', 'submit', 'cancel'],
                                    'update': { uri: 'ajax.php', submit_method: 'form', form_method: 'POST', param_names: ['id','code','title','description'] },
                                    'submit': { text:'Save', title:'Save' },
                                    'cancel': { text:'Cancel', title:'Cancel' }
var products = setEditTable("products", products_Config);

and the table is of this format:

<thead> </thead> <tbody> </tbody>
product id Code Title Description category id
Delete 13 1231231 text text 5
Check this one out, as similar to yours: http://edittable.free.fr/row_editor.php

it was just a wrong } and a wrong ] at the wrong place….after all that it found my code! One last problem remains, i get : Uncaught TypeError: Cannot read property ‘call’ of undefined at ezEditTable-uncompressed.js:636 As far as i can see the js can’t read my keystrokes and so this error appears.

Hi gkandylakis, I confirm this is a bug. While waiting for a new version (v2.3.1) fixing this bug to be published on CodeCanyon, assuming you are importing ezEditTable-uncompressed.js in your page, I confirm you can safely remove line 636:
this.o.Event.Add(txa, 'keypress', function(e){ x.Event.OnKeyPress.call(x, e); });
along with line 694:
this.o.Event.Add(slc, 'keypress', function(e){ x.Event.OnKeyPress.call(x, e); });


Hi , I am using this plugin for one of my table editor project. I am quite newbie to HTML and java. I am using flask on the server side. When we call insert action POST request is sent to the server. Data is processed on the server. Then Flask send HTTP OK response with some text/html type data. We want browse to display this html page. It does not get displayed. I do see HTTP OK response in wire-shark log. Same logic works if I dont use ezEditTable plugin. Can you please help me on this?

I am not sure I understand what you mean. What is not displayed exactly?

Hi, Can ezEditTable integrated with codeigniter ?

Hi, this is a javascript plugin only, so the server side technology/framework does not matter. It can be integrated with whatever framework as long as the javascript file it is imported in a webpage. Cheers

Hello, I just paid for the product. How do I export the table data into an excel file? Thank you

There is no need to define a form element in the page markup, as it will dynamically generate the form with the defined fields upon submission. The submission method, the fields etc are all defined in the configuration object.

Hello, with your help I am able to manage the server-side with classic asp. Now I wanted to show the id immediately after insertion of a new record (now appears only after refresh the page) ... is it possible? Thank you

Hi @sergio57, nice work!

You have an example of how re-injecting the newly generated row ID into the corresponding HTML table row element, refer to the Insert (employeeInsert.php) code example in http://edittable.free.fr/demo1.php

The assumption is that all rows DOM elements have an ID prefixed by `tr` string.


per_m Purchased

Hallo, I am going to use ezedittable for orderitems. I need to be able to calculate values in cells based on value in another cell. Eg: amount * price = total. amount and price and total are individual

:s in the table row. I have searched in the documentation but without success. With kind regards, per

ezEditTable simply leverages the javascript API in order to set data in cells.


per_m Purchased

Ok, any cell?

Not sure I understand, do you mean if it is possible to set data in any table cell with javascript.

If this is your question, yes :)

Hi koalyptus,

1) When we remove one row from table it successfully removed. But when we remove one by one row in last row it is showing “An error occured! undefined Change could not be saved”. how to solve this??

2) In empty table we cannot add new row ???

3) when there is only one row is present in table we cann’t updated that row because to update a row we need to edit first the row than click on next row to sent query to server.

Please help regarding this issue.?

Hi I am looking for a table to work with ASP MVC will this send the POST model collection of rows with row numbers, include buttons like approve etc

Hi @smartgrid, not sure what do you mean by ‘include buttons like approve etc’. This widget simply POSTs the modified or added data in the way you define in the configuration section.

Can you help me please? When I point focus to the ezEditTable, other elements (text inputs) cannot handle input text. Each keypress is “forwarded” to ezEditTable and user replacing data in the table when it’s focused in textbox in other part of the page. Have you some solution for this? Thanks

Hi, I’ve posted video with this error on youtube. I will try again. When I focus the ezTable then I can’t type any text into any textboxes on the page, and I am writing only into table cell where I was been focused in the table.

Also my second problem is, when I am navigating through the table with keyboard, and scroll down out of visible viewport, the page was not scrolling down. I must scroll down page with mouse. This error is also present on your demo page.

url to video of first described error is : https://youtu.be/w5tbL873Z_E

Hi again,

Thanks for posting the video, perfectly clear now… I can feel your frustration :). It seems to me you have the editable_on_keystroke configuration option set true. Try to turn it off or remove it.

For the second issue, you need to set the scroll_into_view configuration setting to true in order to instruct the plugin to automatically place the row element into view when navigating with the keyboard.


Wow, great!!! Everything works now. Perfect tool. Thank you very much for your help!

Hi, please, is there an easy way to replace content of another cell than I am editing? e.g. I am in the cell Quantity and when I change it, I need to recalculate SubTotal cell in the same row as newVal of Quantity * Price? Thank you very much!

You could use the on_after_close_editor callback to do so. Check the Editable and cell editors callback events and delegates section in the documentation. To give an idea on how to use it:
var qtCellIndex = 2;
var priceCellIndex = 3;
var subTotalCellIndex = 12;
var config = {
  on_after_close_editor: function(ez, cell, editor) {
    if(cell.cellIndex === qtCellIndex) {
       var row = ez.Selection.GetActiveRow();
       var rowValues = ez.Selection.GetActiveRowValues();
       var qt = Number(rowValues[qtCellIndex]);
       var price = Number(rowValues[priceCellIndex]);
       var subTot = qt * price;
       row.cells[subTotalCellIndex].innerHTML = subTot;
Consider above example as pseudo code, didn’t tested it, should give you an idea.

Thank you very much for your great support!!!

Hi, is there a possibility to navigate selection only between two columns? I mean : I have table with 10 columns and I want to select cells only in column 3 and column 4. And when I am on column 4 and I will press arrow right I will move to the next row to column 3, etc… ? thanks

Hi, At this stage it is not possible with a configuration option but should be able to achieve that programmatically by using the on_after_cell_selected(ez, cell) selection callback. Check the cell index of the selected cell and if it is not a selectable column, select programmatically the next or previous selectable cell.

Let me know how it goes. Cheers