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”错误，它不会加载表格。请参见下面的示例代码，以开始工作。

let taskDueDate = $('#datepicker').datepicker( "getDate" );
console.log(Math.floor(taskDueDate / 1000));

我希望这会有所帮助！

Answer 2

如果您想重新加载数据表步骤

假设您的初始表启动如下

var myTable = $（＆＃34;＃tableId＆＃34;）。DataTable（{..}）;

销毁上一个表格实例。

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

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

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

保持上述两个步骤的功能，并从数据接收的ajax成功函数中调用它。

这不是加载数据的唯一方法，但它很容易理解。：）

Answer 3

试试这个

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

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

Answer 4

根据你的标题，你说＆＃34;数据表＆＃34;。我认为https://datatables.net就是你的意思。如果我是对的。

该表已经显示，并且＆＃34;添加＆＃34;按钮位于该表的顶部

我认为你在重新加载表时想要实现的是在表中添加新行。实际上，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返回一些内容（在您的情况下为表格）。

如何在使用ajax提交表单后重新加载数据表？

5 个答案: