使用Ruby on Rails在DataTables上使用Jeditable

时间:2013-08-26 19:18:38

标签: jquery ruby-on-rails haml jeditable jquery-datatables

我有一个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警告(table id ='datatable'):无法重新初始化DataTable。   要检索此表的DataTables对象,请不传递参数或查看bRetrieve和bDestroy的文档

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

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

但是,我的表格仍然无法编辑!

1 个答案:

答案 0 :(得分: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();

我认为在表中添加类'datatable'可能会混淆DataTables并导致它抱怨重新初始化。但是从jsFiddle的简短测试来看,情况似乎并非如此。我得到一个帖子错误(显然),但没有初始化错误。

我创建的小提琴是here

但是,你桌上唯一需要的是'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。