使用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();
    });
  });

我希望这有帮助！！

Answer 2

如果要重新加载数据表的步骤要遵循

假设您的初始表启动如下

var myTable = $("#tableId").DataTable({ ..});

1. 销毁表的前一个实例。

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

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

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

保持上面两步的功能，从你的数据接收的ajax成功函数中调用。

这不是加载数据的唯一方法，但易于遵循。 :)

Answer 3

尝试这个

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

有关更多信息，请查看此链接https://datatables.net/reference/api/ajax.reload()

Answer 4

根据您的标题，您说的是“数据表”。 我假设这个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 5

您可以使用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返回一些东西（在你的例子中是一个表）。