Example/ Datatables 1.10 and jeditable

stichcomber

I wonder if there are any easier examples for a CRUD app with Datatables and jeditable.

I want to edit a row of data (more that 1 field) and then after the user presses submit or enter send the data to a script that saves the data.

I do not know how to:
- enable the submit button under a field
- collect the data and send to script
- an example of the best way to save data to database helpful or just some guidance.

Very much appreciated as I have been trying to do this for a couple weeks now.

allan

Hi,

Thanks for your question. I'm not sure there are any examples of DataTables with jEditable available (at least on this site), as the Editor extension provides a full suite of CRUD handling tools, including inline editing.

I want to edit a row of data (more that 1 field) and then after the user presses submit or enter send the data to a script that saves the data.

This unfortunately is not something that Editor does at the moment, and I'm not sure that jEditable was particularly designed to do it either as it is a single data point per operation editing library. The expectation (at least as far as I am aware) is that it will submit the data for each edit.

It might be possible to use the jEditable callbacks to save the edited data back into the DataTable and then submit the data for the row (row().data()) when the submit button is pressed, but you will run into issues with a cancel button - the original data would either need to be stored somewhere else before the first edit, or reloaded from the server when the cancel button is pressed.

Is submitting the full row, rather than individual cells something that your application requires?

Regards,
Allan

stichcomber

Thank you so much for you quick reply. How about if I were to use datatables 1.10 and jeditable. How is it possible to save the data to the db? I don't understand this. I can use codeigniter and made a full crud app using active record are raw sql, however, I just cannot understand jquery.datatables.jeditbale. Is there an example for that including the php so I can understand how the php is receiving the data from datatables?
Thank you!

allan

jquery.datatables.jeditbale

I'm afraid I don't know what that file is - it isn't one authored as part of the DataTables project. Are you able to give me a link to where you got it from so I can take a look?

I don't think it would make much difference if you were using DataTables 1.10 or an older version (although obviously I would recommend the latest version - particularly as you can use the new API which has a lot of features that I think make using it easier).

Regards,
Allan

stichcomber

Sorry, I just mean to say jquery/ datatables/ jeditable. I am looking for some example of how I send the data from the table and some example of how it is being received by php. Would be very much appreciative.

allan

I'm no expert with jEditable I'm afraid as it is not part of the DataTables project and therefore not part of the DataTables support - however, this is how you might use the DataTables API with jEditable to do some basic inline editing:

// Init DataTables
var table = $('#example').DataTable();

// Apply the jEditable handlers to the table
$( table.cells().nodes() ).editable( 'ajaxServerScript', {
    "callback": function( value, y ) {
        table.cell( this ).data( value ).draw();
    },
    "submitdata": function ( value, settings ) {
        return {
            "row_id": $(this).closest('tr').attr('id'),
            "column": table.cell( this ).index().column
        };
    }
} );

The will submit the parameters row_id, column and value to the server which can then be used to perform an SQL UPDATE query.

As I say, Editor has this ability built in and server-side libraries that will do all the SQL data processing for you.

Regards,
Allan

stichcomber

Thank you! Very much appreciated.

Yes, I was also interested in your Editor, however, I was worried that it would not fit into codeigniter very well. If you have ant guidance with codeigniter, I would surely buy the Editor!

Thank you again!

TomNM

I rolled my own cell editor. On cell click, it switches to text input containing the value or nothing. On cell focusout or ENTER key, it saves and close editor, if the contents changed. On ESC key, it closes the editor and does not save.

I'm not an expert, but this was my first attempt and works. If you can make more efficient, I'd be happy to use it.

1. Give those cells a classname like editable.

// inotes
{targets : [14], width : "8%", orderable : false, className : "editable"},

1. Give your table column th a specific id (mine is the db column name).

   <th id="inote">Notes</th>

2. After instantiating the table, I do this (I had trouble combining the

       var original_cell_contents;
   
       $('#example tbody').on('click', '.editable', function() {
           $(this).attr('class', 'editing'); // change class, so editing the input doesn't process the clicks
           original_cell_contents = $(this).html();
           $(this).html("<input type='text' value='" + original_cell_contents + "' class='edit_input'>");
           $(this).find('.edit_input').focus();
       });
   
       $('#example tbody').on('focusout', '.editing', function(e) {
           $(this).attr('class','editable');
           $(this).html($(this).find('.edit_input').val());
           var this_column_name = $(this).closest('table').find('th').eq($(this).index()).text();
           if ($(this).html() != original_cell_contents) {
               $.ajax({
                   url:'qqqqqqqqqqq.php?content=customer&action=update&column='+ $(this).closest('table').find('th').eq($(this).index()).attr("id") + '&id=' + dtable.cell($(this).closest('tr'),0).data() + '&value='+encodeURIComponent($(this).html()),
                   success:function(data) {
                       //do something
                   }
               });
   
           };
       });
   
       $('#example tbody').on('keyup', '.editing', function(e) {
           var keyCode = (window.event) ? e.keyCode : window.event.keyCode;
           var this_column_name = $(this).closest('table').find('th').eq($(this).index()).text();
           if (keyCode == 13 || keyCode == 27) {
               $(this).attr('class','editable');
               if (keyCode == '13') $(this).html($(this).find('.edit_input').val());
               if (keyCode == '27') $(this).html(original_cell_contents);
               if ($(this).html() != original_cell_contents) {
                   $.ajax({
                       url:'qqqqqqqqqqq.php?content=customer&action=update&column='+ $(this).closest('table').find('th').eq($(this).index()).attr("id") + '&id=' + dtable.cell($(this).closest('tr'),0).data() + '&value='+encodeURIComponent($(this).html()),
                       success:function(data) {
                           //do something
                       }
                   });
               }
           };
       });
   

stichcomber

Allan, referring back to you example to me with jeditable, to which page is it posting? That is the part I cannot figure out. How do I get this data?

allan

referring back to you example to me with jeditable, to which page is it posting?

That is the 'ajaxServerScript' string being passed in. You would change it to the name of the URL where you want the data to be sent. This information is in the jEditable documentation.

If you have ant guidance with codeigniter

I'm afraid CI is not a platform I have used myself, so I can't offer much advice on that topic.

@TomNM - Thanks for sharing your solution - very nice!

Allan

soniacaboom

hey Allan,
you have posted a link before referring to CodeIgniter and DataTable integration

http://datatables.net/news/

January 2015
CodeIgniter library for DataTables
Paul Zepernick has created a CodeIgniter library for DataTables that will handle server-side processing and easy table creation for DataTables in CI. Demo here.

http://www.paulzepernick.com/ci-zepernick/

plustgarten

Re: allan's sample code for using jEditable (his 3rd reply on May 12th).

First, thanks a lot for this - it gave me just what I was after! The few other samples of integration with jEditable that I could find on the web used the legacy DataTables API.

One point on the jEditable side of this equation that puzzled me for a bit was that the callback function was getting invoked with an empty value for the 1st parameter ("value"). So when the user pressed ENTER to submit the new value for a cell, that value would get stored on the server, but the DataTables cell would go blank back in the browser! (until the page was completely reloaded).

After a bit of casting about, I happened to discover that jEditable obtains this value from what is >returned< by the server's 'ajaxServerScript' function. Once I had it emit the "value", the callback function had just what it needed, and DataTables could display it. I note this here in the hope it will save someone having to solve that puzzle on their own.

On reflection, this is probably a useful way to do it, since the server can modify or reject the provided value, and provide whatever value it wants to use, and the client display will stay in sync.

A few other tidbits that might be useful to someone who gets this far:

• Adding a jQuery selector to the cells function in the initial "$( table.cells().nodes() )" clause made it very easy to constrain the jEditable actions to just the cells that it makes sense for the user to edit (and not, e.g., a row number or last modified date!). (Nice design, DataTables!)

• The presented code also submits the "id" of the originating cell in the AJAX call (as jEditable submits "id" and "value" by default). By encoding the relevant DB keys in each cell's "id" in my web page, my code doesn't need to use the row_id or column (although it seems handy to see how easy it would be to get them if desired).

• The second parameter of the callback is here called "y" (and unused), but is (per normal jEditable definition) the "settings" object, just as in the "submitdata" anonymous function.

Now ... if only I could figure out how to tell jEditable a function to call when the AJAX call >fails< (such as when a user does an inline update on a stale page still in their browser, but where the server no longer has current session context for it). Hmmmm.....

Paul