0

我有一个 DataTables 表：

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

和 Jeditable 代码基于：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
    });

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

4

1 回答 1

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。

于 2013-08-29T05:55:29.203 回答