jQuery DataTable内联编辑

Question

我一直在尝试在jQuery Datatable中实现简单的内联编辑。但是我无法激活单击单元格上发生的编辑。我用同样的代码在自己的网站Link：

<table id="Datatable" cellpadding="0" cellspacing="0" border="0" class="display"> 
    <thead> 
     <tr> 
      <th>Age</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
</table> 

数据表绑定：

/* Init DataTables */ 
    var oTable = $('#Datatable').dataTable({ 
     "bProcessing": true, 
     "sAjaxSource":"http://localhost:6220/DataSources/WCF/Data.svc/GetCustomer", 
     "aoColumns": [ 
          { "mDataProp": "Age" }, 
          { "mDataProp": "Name" } 
        ] 
    }); 

/* Apply the jEditable handlers to the table */    oTable.$('td').editable('http://localhost:6220/DataSources/WCF/Data.svc/SaveCustomer', { 
        tooltip: 'Click to edit...', 
        "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%" 
      }); 

任何建议高度赞赏。

Answer 1

请参考下面的例子： - https://editor.datatables.net/examples/inline-editing/simple PR - http://jquery-datatables-editable.googlecode.com/svn/trunk/index.html

Answer 2

我建了一个插件，它会在大约两行代码为你做这个。它很小，很基本，但可以完成工作。回购协议是在这里：DataTables CellEdit Plugin

基本的初始化是快速和容易：

oTable.MakeCellsEditable({ 
    "onUpdate": myCallbackFunction 
}); 

myCallbackFunction = function (updatedCell, updatedRow) { 
    console.log("The new value for the cell is: " + updatedCell.data()); 
} 

更新：这已经慢慢增长，在过去的几个月中，有相当多的比当我第一次更多的功能发布了这个答案。感谢所有贡献者在那里投入！