jQuery Datatable jEditableページを更新する

Question

私は、テーブルの最初の列を編集するためにjQuery datatableとJeditableプラグインを使用しています。 Jeditableはdbテーブルを更新し、テーブルに編集された値を表示するようにうまくいきますが、ページを更新した後にのみ行います。私はそれがページをリフレッシュせずに更新されることを望みます。ここに私のコードです：

JavaScriptが

$(document).ready(function() 
{ 
var objTable = $(".example").DataTable(
{ 
    "info": false, 
    "scrollCollapse": true, 
    "paging": false, 
    "order": [[ 1, "asc" ]] 
}); 

$('.edit').each(function() 
{ 

$(this).editable('UpdateDBTableURL', 
    { 

    'width' : '90%', 
    'height' : '80%', 
    'tooltip' : 'Click to Edit', 
    submit : 'Save', 
    cancel : 'Cancel', 
    cssclass : "editable", 
    'submitdata' : 
     { 
     'sCompanyID': CompanyID, 
     'sAction': 'EditLabel' 
     }, 
    'onClick' : 'submit' 

    }); 

}); 

}); 

HTMLコード

<table class="example" width="100%"> 
    <thead> 
    <tr> 
     <th>Label</th> 
     <th>Name</th> 
     <th>Address</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="edit" id="101">&nbsp;</td> 
     <td>Mary Kom</td> 
     <td>2401 N Main St</td> 
    </tr> 
    <tr> 
    <td class="edit" id="102"></td> 
    <td>David Kom</td> 
    <td>2401 N Main St</td>  
    </tr> 
</tbody> 
</table> 

Answer 1

あなたはこの微調整する必要があるかもしれませんが、行が建設されているように私はjEditのを追加するデータテーブルcreateRow機能を使用。

$(document).ready(function() { 
     var objTable = $(".example").DataTable(
     { 
      "info": false, 
      "scrollCollapse": true, 
      "paging": false, 
      "order": [[1, "asc"]], 
      "createdRow": function (row, data) { 

       $(row).children(":nth-child(1)").editable('UpdateDBTableURL', 
       { 

        'width': '90%', 
        'height': '80%', 
        'tooltip': 'Click to Edit', 
        submit: 'Save', 
        cancel: 'Cancel', 
        cssclass: "editable", 
        'submitdata': 
         { 
          'sCompanyID': CompanyID, 
          'sAction': 'EditLabel' 
         }, 
        'onClick': 'submit' 

       }); 
      } 
     }); 
    });