Using Jeditable on DataTables with Ruby on Rails

Question

I have a DataTables table:

  %table.table.datatable#datatable
    %thead
      %tr
        %th Name
    %tbody
      - @cars.each do |car|
        %tr
          %td
            = car.name

And Jeditable code based on: http://datatables.net/release-datatables/examples/api/editable.html

:javascript
$(document).ready(function() {
    /* Init DataTables */
    var oTable = $('#datatable').dataTable();

    /* Apply the jEditable handlers to the table */
    oTable.$('td').editable( 'update', {
        "callback": function( sValue, y ) {
            var aPos = oTable.fnGetPosition( this );
            oTable.fnUpdate( sValue, aPos[0], aPos[1] );
        },
        "submitdata": function ( value, settings ) {
            return {
                "row_id": this.parentNode.getAttribute('id'),
                "column": oTable.fnGetPosition( this )[2]
            };
        },
        "height": "14px",
        "width": "100%"
    } );
} );

I get the following error when page loads:

DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

Add this before: var oTable = $('#datatable').dataTable();

    $('#datatable').dataTable({   
      "bRetrieve":true,
      "bDestroy":true
    });

However, my table is still not editable!

Answer 1

I initially thought the problem was in your HAML. DataTables will apply it's own class of "dataTable" to your table, which I thought might be causing it to think that the table has already been initialized.

From the page source for the jEditable example, you can see that DataTables adds the 'dataTable' class to the table when it initializes it.

<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="example" aria-describedby="example_info">
</table>

They only needed to initialize their table with:

var oTable = $('#example').dataTable();

I thought that adding the class 'datatable' to the table might confuse DataTables and causes it to complain about re-initialization. But from brief testing in jsFiddle, that appears to not be the case. I get a post error (obviously), but no initialization errors.

The fiddle I created is here.

Still, the only thing you should need on your table is the 'dataTable' id.

Your 'fix' doesn't actually address the problem. If you look in the DataTables (v1.9.4) source at around line 6390, you'll notice that the bDestroy flag causes any previously initialized DataTable instance to be destroyed.

/* Base check on table node */
if ( DataTable.settings[i].nTable == this )
{
   if ( oInit === undefined || oInit.bRetrieve )
   {
      return DataTable.settings[i].oInstance;
   }
   else if ( oInit.bDestroy )
   {
      DataTable.settings[i].oInstance.fnDestroy();
      break;
   }
   else
   {
      _fnLog( DataTable.settings[i], 0, "Cannot reinitialise DataTable.\n\n"+
         "To retrieve the DataTables object for this table, pass no arguments or see "+
         "the docs for bRetrieve and bDestroy" );
         return;
   }
}

So that clears out the previously initialized table, and the error message goes away. But it doesn't resolve the issue (as you stated).

Try using a different ID for this table (call it '#editableTable' or something), and see if that fixes the problem. If it does, then you do have another initialized table with the same id or class. If you still get the initialization error after checking that's not the case, I'd verify that you're not using pjax or turbolinks which could be causing issues.