php - 如何使用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

今晚我自己尝试过。我没有成功使用 DataTable 的内置 API。我不断收到“无效 JSON”错误，并且无法加载表。请参阅下面的示例代码，我可以使用它。

$(document).ready(()=> {
    // wait for page to load
    let userid = 12345;
    function loadtbl() {
      $.get("data.php?userid=" + encodeURIComponent(userid), (data)=> {
        // initialize datatable with your specified parameters
        $("#exampletbl").DataTable({});
      }):
    }
    // The table will not load unless if you call on the function which is done below
    loadtbl();
    // Submit new data to back end and then reload table
    $("#form").submit((event)=> {
      $.post("data.php", {username: $("#username").val()}, (data)=> {
        // Destroy the table the reload it
        $("#contactstbl").DataTable().destroy();
        loadtbl();
      });
      event.preventDefault();
    });
  });

我希望这有帮助!!