在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。