Jquery dataTable 편집 가능한 셀

Question

나는 이것을 지난 4 시간 동안 어지럽 혀서 그냥 포기하고 있습니다. 여기에 jquery 데이터 테이블을 사용할 때. http://datatables.net/examples/api/editable.html (매우 인기있는 플러그인처럼 보입니다) 편집 가능한 셀 부분을 제외하고는 거의 모든 작업을 수행 할 수 있습니다. 이 파일을이 순서로 가지고 있습니다.

<script src="JS/jquery.js"></script> 
<script src="JS/jquery.dataTables.min.js" type="text/javascript"></script> 
<script src="JS/jquery.jeditable.js"></script> 
<script src="JS/jquery.validate.js"></script> 
<script src="JS/ColReorder.min.js"></script> 
<link href="JS/css/jquery.dataTables.css" rel="stylesheet" /> 

이 스크립트를 사용하여 테이블을 초기화 할 수 있습니다.

function formattable(thistable) { 
     //alert(thistable + " from format table") 
     // $(document).ready(function() { 
      // ADPControlProcessor_Table1 
     //$("#ADPControlProcessor_GridView1").dataTable(); 

     var oTable = $("#ADPControlProcessor_GridView1").dataTable({ 
       //"bFilter": true, 
       "sScrollY": "200px", 
       "bPaginate": false, 
       "bAutoWidth": false, 
       "sDom": 'Rlfrtip' 



      //}); 
      //alert("running"); 
     }); 

     //var oTable = $('#example').dataTable(); 

     /* Apply the jEditable handlers to the table */ 
     $('td', oTable.fnGetNodes()).editable('../examples_support/editable_ajax.php', { 
      "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" 
     }); 

나는 어떤 엘레어를 시도해야할지 모릅니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니다.

Answer 1

당신은 여기 하나

$(document).ready(function() { 
     /* Init DataTables */ 
     var oTable = $('#example').dataTable(); 

     /* Apply the jEditable handlers to the table */ 
     $('td', oTable.fnGetNodes()).editable('../examples_support/editable_ajax.php', { 
      "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" 
     }); 
    }); 

라이브 예를 click here 대신 당신이 자유롭게 사용할 수있는 내 자신을 내장 된 편집 가능한 플러그인에 대한 지불의

Answer 2

입니다 올바른 시도를 초기화하지 않습니다. 의 repo는 여기에 있습니다 : DataTables CellEdit Plugin

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

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

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