DataTables logo DataTables

via Ad Packs
Inline editing
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    Hello all,

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

    http://datatables.net/blog/Inline_editing

    Enjoy :-)
    Allan
  • 18 Comments sorted by
  • Vote Up0Vote Down DrewridersDrewriders
    Posts: 1
    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.
  • Vote Up0Vote Down numberonenumberone
    Posts: 58
    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 );
  • Vote Up0Vote Down w9r1w9r1
    Posts: 2
    .
  • Vote Up0Vote Down w9r1w9r1
    Posts: 2
    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?
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    @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.

    Allan
  • Vote Up0Vote Down cippallcippall
    Posts: 4
    Hi Allan,

    The are a couple of things going on with the main demo http://datatables.net/blog/Inline_editing 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.
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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.

    Allan
  • Vote Up0Vote Down cippallcippall
    Posts: 4
    Having only one row in edit mode works in my case. Thanks for that.
    Is it possible to use textareas instead of inputs text?
  • Vote Up0Vote Down cippallcippall
    Posts: 4
    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. :)
  • Vote Up0Vote Down TomerTomer
    Posts: 1
    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
  • Vote Up0Vote Down michaelhayespolarismichaelhayespolaris
    Posts: 4
    Anybody figure out how to set the input focus to one of the cells in the row that is being edited?
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    Just use $(node).focus() where node is a suitable selector.

    Allan
  • Vote Up0Vote Down mayur7777mayur7777
    Posts: 1
    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 .
  • Vote Up0Vote Down elgarchelgarch
    Posts: 13
    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
  • Vote Up0Vote Down elgarchelgarch
    Posts: 13
    i tired this line on delete click nEditing= null; and the problem disapears. yamiiiiii :D
  • Vote Up0Vote Down altsysetaltsyset
    Posts: 10
    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?
  • Vote Up0Vote Down vibhugargvibhugarg
    Posts: 3
    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.
  • Vote Up0Vote Down altsysetaltsyset
    Posts: 10
    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.
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion