如何在使用ajax提交表单后重新加载数据表 - How to reload data table after submitting a form using ajax?

表已经显示，并且在该表的顶部有一个"添加"按钮。我想做的是在提交我所拥有的模态表单后重新加载该表。

以下是我添加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>

问题是：提交表单后如何重新加载表格？

我今晚自己也在尝试。我没有成功使用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();
    });
  });

我希望这能有所帮助！！

如果您想重新加载数据表，请按照执行步骤

假设您的初始表格初始值低于

var myTable=$（"#tableId"）。DataTable（｛..｝）；

销毁表的上一个实例。

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

使用新接收的数据再次初始化表。

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

在函数中保留以上两个步骤，并从数据接收的ajax成功函数中调用它。

这不是加载数据的唯一方法，但操作起来很简单。：）

试试这个

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

欲了解更多信息，请查看此链接https://datatables.net/reference/api/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

您可以使用success参数将数据附加到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返回一些内容（在您的情况下是一个表）。