Question

我想在数据库中插入新数据后重新加载数据表。我已经编写了这段HTML代码。

<table class="table table-striped table-bordered bootstrap-datatable datatable" id="Slider_table">
<thead>
    <tr>
        <th>Title</th>
        <th>Price</th>
    </tr>
</thead>
<tbody>
    <?php foreach($items as $row){?>
    <tr>
        <td><?=$row->item_title;?></td>
        <td class="center"><?=$row->item_price;?></td>
   </tr>
</tbody>

但是它给了我console.log中的错误。

未捕获的TypeError：无法读取未定义的属性“重新加载” 在该行$("#Slider_table").DataTable().ajax.reload();

$('#add_items').on('click', function(e){
    e.preventDefault();
    var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form

    $.ajax({
        url: "<?= base_url(); ?>Items/add_items",
        type: "post",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(output) {
            $("#Slider_table").DataTable().ajax.reload();
        }
    });
});

Answer 1

您必须将数据表引用存储在一个变量中。而且根据您所使用的代码，您不能使用datatable ajax重新加载方法。

因此，您必须应用以下解决方案：

定义表变量： var table;

并在文档就绪功能上加载这样的数据表。

table = $("#Slider_table").DataTable();

$('#add_items').on('click', function(e){
    e.preventDefault();
    var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form

    $.ajax({
        url: "<?= base_url(); ?>Items/add_items",
        type: "post",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(output) {
            table.row.add($(output)).draw();
            // Here in output you have to return table rows html from php

        }
    });
});

Answer 2

您可以使用

  dtable.draw();

成功之后。它将刷新您的数据表

jQuery Uncaught TypeError：无法读取未定义的属性“重新加载”

2 个答案: