2016-03-26 25 views
1

ユーザーが新しいデータを要求したときに再描画されるデータテーブルがあります。たとえば、すべてのメンバーを表示し、ユーザーがボタンをクリックすると、期限切れのメンバーのみを表示するように表が再描画されます。データテーブルの再描画でX編集可能なデータを初期化する

私は、データテーブルのセル内に表示されるフィールドの編集にx-editableを使用しています。最初の描画ではうまく動作しますが、テーブルが再描画されたときにx-editableを表示することはできません。 )

1:ここでは

は、私が試したものであるdraw.dtイベントを使用 -

$('#memberTable').on('draw.dt', function() { 
     showEditable(); 
     // continue with other things that are initialized on draw.dt all of which work 
    }); 

    function showEditable(){ 
     $('.testX a').editable({ 
     type: 'text', 
     pk: function() { 
      return $(this).closest("td").data("id"); 
     }, 
     url: '/update_task/', 
     title: 'Edit Term' 
    }); 
}; 

2):drawCallBack誰もが見るに直接データテーブルの初期化に

$('#memberTable').dataTable({ 
    columnDefs: [{ searchable: false, targets: 3 }], 
    processing: true, 
    pageLength: 20, 
    lengthMenu: [[10, 20, 50, -1], [10, 20, 50, 'All']], 
    drawCallback: function(settings) { 
     $('.testX a').editable({ 
     type: 'text', 
     pk: function() { 
      return $(this).closest("td").data("id"); 
     }, 
     url: '/test', 
     title: 'Edit' 
    }); 
    alert('DataTables has redrawn the table'); 
} 
}); 

私はデータ編集可能な再描画でx編集可能な作業をするために何が欠けているのですか? TIA。

答えて

0

次のソリューションは、私を助け:

// Initiate the x-editable plugin 
function get_editable() { 
    $.fn.editable.defaults.mode = 'popup'; 
    $('.xedit').editable(); 
} 

// Initiate the DataTable 
table = $('#table').DataTable({ 
      option... 
      drawCallback: function (settings) { 
       get_editable(); 
      }, 
      option... 
}); 
関連する問題