ajaxを使用してフォームを送信した後にデータテーブルを再読み込みするにはどうすればよいですか？

Question

テーブルは既に表示されており、そのテーブルの上に「追加」ボタンがあります。私がしたいのは、私が持っているモーダルフォームを提出した後にテーブルをリロードすることです。

ここにjsonオブジェクトを追加するための私のajaxコードがあります。私は、この解決策もこの中にあると確信しています。

$('#btnSubmit').click(function(event) { 
     var formData = { 
      'name'   : $('[name=name1]').val(), 
      'address'  : $('[name=bAddress1]').val(), 
      'officer'  : $('[name=officer1]').val(), 
      'contactnumber': $('[name=contactN1]').val() 
     }; 

     $.ajax({ 
      type  : 'POST', 
      url   : "process.php", 
      data  : formData, 
      dataType : 'json', 
      encode  : true, 
      success  : function(r){ 
          var status = "1"; 
          alert (status);   
          }, 
      dataType: "html" 
     });   
}); 

そして、ここで私はテーブルに

<div class="container"> 
.... 
</div> 

を読み込むところで質問です：私は、フォームを送信した後、テーブルをリロードするにはどうすればよいですか？

Answer 1

あなたが最初のテーブルの開始は

VAR mytableは= $（ "＃のTABLEID"）以下のようなものであると仮定すると、

に従うようにデータ・テーブル・ステップを再ロードする場合のDataTable（{..}）;

1. テーブルの前のインスタンスを破棄します。

   myTable = $("#tableId").DataTable(); 
   myTable.destroy(); 
   

2. 新たに受信したデータで再度テーブルを初期化する。

   myTable = $("#tableId").DataTable({ 
   ......... 
   //Your table parameters 
   }); 
   

機能に上記の2つのステップを維持し、データ受信のあなたのAJAX成功関数からそれを呼び出します。

これは、データをロードする唯一の方法ではなく、その簡単な手順です。 :)

Answer 2

することは、このリンクをあなたのタイトルに https://datatables.net/reference/api/ajax.reload()

Answer 3

ベースをご確認ください詳細については、この

$('#selector').DataTable().ajax.reload(); 

を試してみてください、あなたは、 "データテーブル" と述べました。私はこれがhttps://datatables.netと言っていると思います。私が正しいならば。

の表は、すでに表示され、ボタンを「追加」された私は、あなたのテーブルをリロードして達成しようとしているものと考え、そのテーブルの上

であることは、あなたのテーブルに新しい行を追加することです。実際には、Datatablesにはテーブル全体を再ロードせずにAPIがあります。もっと効率的。

$('#btnSubmit').click(function(event) { 
    var n = $('[name=name1]').val(); 
    var a = $('[name=bAddress1]').val(); 
    var o = $('[name=officer1]').val(); 
    var c = $('[name=contactN1]').val() 
    var formData = { 
     'name'   : n, 
     'address'  : a, 
     'officer'  : o, 
     'contactnumber': c 
    }; 

    $.ajax({ 
     type  : 'POST', 
     url   : "process.php", 
     data  : formData, 
     dataType : 'json', 
     encode  : true, 
     success  : function(){ 
          $('#yourTable').DataTable().row.add([ 
           n, 
           a, 
           o, 
           c 
          ]).draw(false); 
         }, 
     dataType: "html" 
    });   
}); 

参考：https://datatables.net/examples/api/add_row.html

Answer 4

あなたのsuccessのparamでDOMにデータを追加することができます。

これはあなたのコードは次のようになります方法です：

$.ajax({ 
    type  : 'POST', 
    url   : "process.php", 
    data  : formData, 
    dataType : 'json', 
    encode  : true, 
    success  : function(data){ 
        $('.container').html(data); // <--- append data to div 
        }, 
    dataType: "html" 
}); 

はprocess.phpリターンは何か（あなたのケースでは、テーブル）ことを確認してください。