在Ruby on Rails中使用DataTables上的Jeditable

Question

我有一个DataTables表：

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

和可编辑的代码基于： 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%"
    } );
} );

页面加载时出现以下错误：

DataTables警告（表ID ='datatable'）：无法重新初始化DataTable。 要检索此表的DataTables对象，请不传递任何参数，或参阅bRetrieve和bDestroy的文档

在此之前添加： var oTable = $('#datatable').dataTable();

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

但是，我的表仍然不可编辑！

Answer 1

我最初以为问题出在您的HAML中。 DataTables会将自己的“ dataTable”类应用于您的表，我认为这可能导致它认为该表已经初始化。

从jEditable示例的页面源中，您可以看到DataTables在初始化表时将'dataTable'类添加到表中。

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

他们只需要使用以下方法初始化表：

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

我认为将“数据表”类添加到表中可能会使DataTables感到困惑，并使它抱怨重新初始化。 但是从jsFiddle中的简短测试来看，情况似乎并非如此。 我收到一个发布错误（很明显），但是没有初始化错误。

我创建的小提琴在这里 。

尽管如此，您在表上唯一需要的就是'dataTable'ID。

您的“解决方案”实际上并未解决问题。 如果在第6390行附近查看DataTables（v1.9.4）源，您会注意到bDestroy标志导致任何先前初始化的DataTable实例被破坏。

/* 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;
   }
}

这样就清除了先前初始化的表，并且错误消息消失了。 但这不能解决问题（如您所述）。

尝试为该表使用其他ID（称为“ #editableTable”或类似名称），看看是否可以解决问题。 如果是这样，那么您的确有另一个具有相同ID 或类的初始化表。 如果在检查不是这种情况后仍然出现初始化错误，我将确认您没有使用可能导致问题的pjax或turbolinks。