2011-07-02 3 views
0

jQuery와 해당 플러그인 DataTables (http://www.datatables.net/release-datatables/examples/api/editable.html)를 사용하여 편집 가능한 테이블을 만들려고합니다.은 jQuery (DataTables 플러그인)에서 편집 가능한 테이블에 대한 도움이 필요합니다.

여기 내 코드가 있습니다. 그것의 상단 부분은 js 배열의 데이터로 DIV 내부에 테이블을 생성함으로써 훌륭하게 작동합니다.

이 테이블을 편집 할 수 있어야합니다. 나는 그것을위한 예제 코드를 찾았지만 (바닥 부분을 보시오) 다소 내 테이블에 그것을 적용하는 방법을 알아낼 수 없다?

아이디어가 있으십니까? 감사!

말했다되고 그건
$('#example').dataTable(options).makeEditable(options); 

이, 나도 아직 일을 못 했어 : 같은

$(document).ready(function() { 

      $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'); 
      /// create a table within the '#dynamic' DIV 

      $('#example').dataTable({ 
       "aaData": numbarr,  /////// takes data from the 'numbarr' js array. 
       "aoColumns": [ 
        { "sTitle": "Country&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }, //// column names 
        { "sTitle": "Number&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }, 
        { "sTitle": "Tariff ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }, 
        { "sTitle": "Customer Acc&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }, 
        { "sTitle": "Customer Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }, 
        { "sTitle": "Payment Terms&nbsp;&nbsp;" }, 
        { "sTitle": "Payout/Call&nbsp;&nbsp;" }, 
        { "sTitle": "Payout/Min&nbsp;&nbsp;" }, 
       ] 
      }); 

      ///////////////////////////// the code above workd fine! 


      ////////////////// this code was taken from an example, not sure how to connect it with my 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": "12px" 
      }); 
      ////////////////// this code was taken from an example, not sure how to connect it with my table... 

답변

0

나는 상태를 볼 수있는 예를 사용했습니다 .

$('#tblDataTable2').dataTable({ 

    "bJQueryUI": true, 
    "sPaginationType": "full_numbers", 
    "aaSorting": [[ 0, "asc" ]], 
    "aoColumnDefs": [ 
     { "sClass": "center", "aTargets": [ 0, 1 ] } 
    ] 
}).makeEditable({ 
    sAddURL: "Setting?operation=create", 
    sUpdateURL: "Setting?operation=update", 
    "aoColumns": [ 
       { placeholder: '' }, 
       { placeholder: '' } 
      ], 
}); 
:
0

나를 위해 작동하는 예입니다
관련 문제