jQuery - リロード/リフレッシュせずにデータテーブルにローを追加する

Question

私はDBにデータを追加しようとしていますが、ページをリロードまたはリフレッシュせずにajaxとjQueryデータテーブルを使用して同じページに表示しています。私のコードは、データベースとの間でデータの保存と検索を行っています。しかし、更新されたデータリストは、検索ボックスに入力したり、テーブルヘッダをクリックすることなく、データテーブルに表示されません。ページの読み込み中に同じ問題が発生しました。ここで

は私のコードは、このメソッドは、内部テーブルにデータを追加しますが、視覚的に表は、この新しいを考慮して表示更新されませ ん

documentationから

//show data page onload    
$(document).ready(function() { 
    catTable = $('#cat_table').DataTable({ 
     columns: [ 
     { title: "Name" }, 
     { title: "Level" }, 
     { title: "Create Date" }, 
     { title: "Status" } 
     ] 
    }); 
    get_cat_list(); 
}); 

//save new entry and refresh data list 
$.ajax({ 
    url: 'category_save.php', 
    type: 'POST', 
    data:{name: name,level: level}, 
    success: function (data) { 
     get_cat_list(); 
    }, 
    error: function (data) { 
     alert(data); 
    } 
}); 

//function to retrieve data from database 
function get_cat_list() { 
    catTable.clear(); 
    $.ajax({ 
     url: 'get_category_list.php', 
     dataType: 'JSON', 
     success: function (data) { 
     $.each(data, function() { 
      catTable.row.add([ 
       this.name, 
       this.level, 
       this.create_date, 
       this.status 
      ]); 
     }); 
     } 
    }); 
} 

Answer 1

、

ですデータ。 row.add（）メソッドの返されたオブジェクトの連鎖方法として単に呼び出すことができるdraw()方法を使用し、テーブルの表示を更新させるために

。

ですから、次のようになり、成功法、

$.each(data, function() { 
    catTable.row.add([ 
     this.name, 
     this.level, 
     this.create_date, 
     this.status 
    ]).draw(); 
});