jQuery DataTable 인라인 편집

Question

jQuery Datatable에서 간단한 인라인 편집을 구현하려고했습니다. 그러나 행 셀을 클릭 할 때 발생하는 편집을 활성화 할 수는 없습니다. 바인딩 데이터 테이블

<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%" 
      }); 

나는 자신의 사이트 Link에서와 동일한 코드를 사용했다.

Answer 1

다음의 예를 참조하십시오 - 나는 코드의 약 2 라인에서 당신을 위해이 작업을 수행 할 수 있습니다 플러그인을 내장 http://jquery-datatables-editable.googlecode.com/svn/trunk/index.html

Answer 2

-https://editor.datatables.net/examples/inline-editing/simple 홍보 . 작고 예쁜 베이직이지만 일을 끝내게됩니다. 의 repo는 여기에 있습니다 : DataTables CellEdit Plugin

기본 초기화를 빠르고 쉽게 :

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

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

업데이트 :이 천천히 지난 몇 개월 동안 성장과 때 처음에 비해 꽤 많은 더 많은 기능을 가지고있다 이 답변을 게시했습니다. 거기에 참여한 모든 공헌자 덕분에!