Inline editing

Inline editing

allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
edited May 2011 in Blog
Hello all,

A new blog post discussing how inline, full row editing can be achieved quite simply with the DataTables API:

Enjoy :-)


  • DrewridersDrewriders Posts: 1Questions: 0Answers: 0
    I think this is great! Just one issue. How do you update the row's css with the correct background color? If I enter an 'X' in the last field I would expect the row to change to the appropriate background color.
  • numberonenumberone Posts: 86Questions: 0Answers: 0
    edited July 2011
    Really nice

    Btw got an error after deleting one item and click edit :
    aData is null
    [Break On This Error] oTable.fnUpdate( aData[i], nRow, i, false );
  • w9r1w9r1 Posts: 3Questions: 0Answers: 0
    edited November 2011
  • w9r1w9r1 Posts: 3Questions: 0Answers: 0
    This would be perfect since we need to intercept edits to attempt to lock the row on the database before anything is actually changed, and unlock the row on cancellations, and after updates (we use a separate table to control locking). I'm fairly new to JQUERY and this stuff. Is it possible to make dataTables with makeeditable plugin work like this with all of the functionality? How can I use the jeditable plugin with this approach?
  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    @w9r1: The makeeditable plug-in isn't related to this thread - you might be better opening a new thread with questions about how to modify that plug-in. Having said that, you will almost certainly need to modify it to have it send an XHR to the server to request that it locks a DB row (and that will need a time out of some kind I guess) when editing starts, and then have it unlock when the editing is complete and the update done.

  • cippallcippall Posts: 4Questions: 0Answers: 0
    Hi Allan,

    The are a couple of things going on with the main demo when you add more then 1 row. Let's say you add three more rows and all of them are in edit mode. After filling the text for 1 row and pressing save sometimes it resets the input values without saving and other times resets the text of all the rows that are in edit mode.
  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    I think the correct thing would probably be to not allow more than one empty new row at a time in the demo. This could be done by adding the code:

    // Only allow a new row when not currently editing if ( nEditing !== null ) { return; }
    to the 'add' event handler. This might be what is wanted for the interaction, it might not be... Ultimately some code would need to be crafted for each use case. The intention with the blog post is to show how it might be done and provide a solid starting point, rather than a column plug-in solution. Eventually I'll write an editing plug-in for DataTables - the reason I haven't thus far is that there are about a million different ways to do the interactions needed, and I don't want to dictate them for the plug-in.

  • cippallcippall Posts: 4Questions: 0Answers: 0
    Having only one row in edit mode works in my case. Thanks for that.
    Is it possible to use textareas instead of inputs text?
  • cippallcippall Posts: 4Questions: 0Answers: 0
    I was getting confused setting the textarea value until i found that textarea has no value attribute, its value comes between tags, i.e: <textarea>my text</textarea>. Problem solved. :)
  • TomerTomer Posts: 1Questions: 0Answers: 0
    edited February 2012
    I'm trying to use that example with FixedColumns enabled and it breaks at restore row oTable.fnUpdate( aData[i], nRow, i, false );, getting data from row var aData = oTable.fnGetData(nRow); returns null
  • michaelhayespolarismichaelhayespolaris Posts: 4Questions: 0Answers: 0
    Anybody figure out how to set the input focus to one of the cells in the row that is being edited?
  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    Just use $(node).focus() where node is a suitable selector.

  • mayur7777mayur7777 Posts: 1Questions: 0Answers: 0
    hey Alan,
    thanks for the example,but I m getting one issue with the working of jquery.As in my case I am populating the table with the help of ITERATOR, I got 3 rows in my dynamic table and the edit functionality works only for one row(last row).
    kindly help me out .
  • elgarchelgarch Posts: 13Questions: 0Answers: 0
    i have the same problem as numberone.

    when i clicked to update a row and instead of clicking on save, i clicked on delete, the row was deleted but after clicking on edit another row, i got this error :

    aData is null
    [Stopper sur une erreur]

    oTableGestion.fnUpdate( aData[i], nRow, i, false );

    i don't know what causes that problem, any help would be appreciated.
    Thanks in advance.

    El garch
  • elgarchelgarch Posts: 13Questions: 0Answers: 0
    i tired this line on delete click nEditing= null; and the problem disapears. yamiiiiii :D
  • altsysetaltsyset Posts: 10Questions: 0Answers: 0
    edited April 2012
    So there is no way of using inline editing with other input types? or is it solved? Also how save the data to the database?
  • vibhugargvibhugarg Posts: 3Questions: 0Answers: 0
    We are exactly using the datatables this way. when the table-layout:auto css attribute made the whole ui to flicker in Edit mode(had to move to fixed layout), you should think of a solution that auto mode can be used without flickering.
  • altsysetaltsyset Posts: 10Questions: 0Answers: 0
    I have to use this with a drop down list...any idea how? Also I have to access the added data and the updated once and save into MySQL database when users click a button.
  • silvagerrysilvagerry Posts: 3Questions: 0Answers: 0
    edited May 2012
  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    I don't really understand the first change I'm afraid. The server-side processing mode of DataTables must send sEcho and sEcho must be returned. If it isn't being sent, then you probably aren't using DataTBles in server side processing mode.

    Regarding the second issue, can you link to a test page showing the issue please? I example appears to work okay there.

  • silvagerrysilvagerry Posts: 3Questions: 0Answers: 0
    Allan, thank you for your kindness in sharing and maintaining this fantastic plug-in.
    Got the codes working with full PHP back end.
    Hope other members in the community can use my demo.
  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    Excellent - thanks for sharing your code with us :-)

  • epitomeepitome Posts: 1Questions: 0Answers: 0
    I installed the latest Version and had a tiny issue with the Table as it is called partners and in the code adressed with Partners. After changing the capital letter in the code it worked just fine.


  • lonewolflonewolf Posts: 1Questions: 0Answers: 0
    Regarding inline editing, are there any tutorials about incorporating this with ASP.NET MVC?

  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    No sorry. I am planning to do a tutorial soon about Editor though :-).

  • rkhairnrkhairn Posts: 2Questions: 0Answers: 0
    can we use other inputs like dropdown in the table?
  • allanallan Posts: 30,677Questions: 1Answers: 2,516 Site admin
    Sure - you would need to add a little bit of code to add that ability to the technique used in my blog post though. Or consider using Editor which has select menu options built in and other field types can be added with plug-ins.

  • rkhairnrkhairn Posts: 2Questions: 0Answers: 0
    @Allan: Thank you for early reply. I am trying to use drop down list instead of text input , but I am not getting it right way. can you please tell, how can i do it?
  • NotaceNotace Posts: 21Questions: 0Answers: 0
    I have got the basic functionality working, but am now stuck on how to incorporate the back end to upate the database. I am using ColdFusion. What we generally do is:
    1. Collect our input (This bit works)
    2. Use hidden input fields to indicate what action to take
    3. Do a submit of the form
    4. Server then looks at the form elements and determines what to do.

    So I have CF code that looks like this immediately after my </head> tag
    <cfif isdefined("form.hdnaction")> <cfoutput> <script type="text/javascript" language="javascript"> alert("hdnaction exists = #form.hdnaction#"); </script> <cfif form.hdnaction neq "display"> <p> Action #form.hdnaction#<br> Dealer #form.hdndlr#<br> Name #form.hdnname#<br> Address #form.hdnsddr#<br> Location #form.hdnloc#<br> Postcode #form.hdnpcode#<br> State #form.hdnstate#<br> Country #form.hdnctry#<br> Phone #form.hdnphone# </p> </cfif> </cfoutput> </cfif> <body> <form name="aa_TestEdit" id="aa_TestEdit" action="aa_TestEdit.cfm" method = "post"> <!--- some variables to apply any edits ---> <input type="hidden" ame ="hdnaction" id="hdnaction" value=''> <input type="hidden" ame ="hdndlr" id="hdndlr" value=''> <input type="hidden" ame ="hdnname" id="hdnname" value=''> <input type="hidden" ame ="hdnaddr" id="hdnaddr" value=''> <input type="hidden" ame ="hdnloc" id="hdnloc" value=''> <input type="hidden" ame ="hdnpcode" id="hdnpcode" value=''> <input type="hidden" ame ="hdnstate" id="hdnstate" value=''> <input type="hidden" ame ="hdnctry" id="hdnctry" value=''> <input type="hidden" ame ="hdnphone" id="hdnphone" value=''> This is looking to see if there is a form, and a form element called hdnaction. Initially it won't find one, but I expect it should once we submit the form.

    I have modified the functions binding the add/edit/save/delete links as follows
    $('#dealers a.delete').live('click', function (e) { e.preventDefault(); var nRow = $(this).parents('tr')[0]; oTable.fnDeleteRow( nRow ); document.aa_TestEdit.hdnaction.value = "delete"; } ); $('#dealers a.edit').live('click', function (e) { e.preventDefault(); /* Get the row as a parent of the link that was clicked on */ var nRow = $(this).parents('tr')[0]; if ( nEditing !== null && nEditing != nRow ) { /* Currently editing - but not this row - restore the old before continuing to edit mode */ restoreRow( oTable, nEditing ); editRow( oTable, nRow ); document.aa_TestEdit.hdnaction.value = "edit"; nEditing = nRow; } else if ( nEditing == nRow && this.innerHTML == "Save" ) { /* Editing this row and want to save it */ saveRow( oTable, nEditing ); nEditing = null; } else { /* No edit in progress - let's start one */ editRow( oTable, nRow ); document.aa_TestEdit.hdnaction.value = "edit"; nEditing = nRow; } } ); As you can see, I set the hdnaction input to indicate what action is to be taken when we submit the form.
    At the end of the saveRow function, I have added a call to updatedata, which looks like this
    function updatedata(aData){ document.aa_TestEdit.hdndlr.value = aData[0]; document.aa_TestEdit.hdnname.value = aData[1]; document.aa_TestEdit.hdnaddr.value = aData[2]; document.aa_TestEdit.hdnloc.value = aData[3]; document.aa_TestEdit.hdnpcode.value = aData[4]; document.aa_TestEdit.hdnstate.value = aData[5]; document.aa_TestEdit.hdnctry.value = aData[6]; document.aa_TestEdit.hdnphone.value = aData[7]; document.getElementById("aa_TestEdit").submit(); } Notice the submit(). This does do a submit, but the server doesn't see the form, so doesn't know what to do. Once this is working correctly, I intend to replace the displays of the data with either Delete, or Insert/Update, as appropriate, before reloading the page with the new data.

    Any ideas why the server can't see the form when I do my submit?


  • pceinc88pceinc88 Posts: 2Questions: 0Answers: 0
    Hi all,

    Is there a Datatables editing example that shows how to do client side validation and server side validation and show validation errors.

    Also, I vote to have a simple serverside aJax example which shows the validation and updating using MySql PHP.

    Best, LA Guy
This discussion has been closed.