在ajax更新或插入调用后如何更新/刷新数据表？

Question

我这里有此表，该表由数据库查询结果填充：

<div class="card-block">
    <table id="catTbl" class="display" width="100%" cellspacing="0"  data-toggle="modal" data-target="#cat-update">
         <thead>
             <tr>
                 <th>ID</th>
                 <th>Title</th>
             </tr>
         </thead>
         <tbody>
             <?php
                 include "../processes/getLists.php";
                 $process = new getLists();
                 $process->getCatForTbl();
                 //used PHP PDO for that
             ?>
         </tbody>
      </table>
      <p id="message" style="margin-top: 15px"></p>
</div>

我可以使用ajax在数据库中正确更新和插入行，因此该页面不会在以后的每个过程中加载，但是问题是，如果在每次插入/更新之后我都没有重新加载页面，那么数据表将不会使用新更新的/插入的行。

我尝试了$("#catTbl").ajax.reload() ， $("#catTbl").clear().draw()但除非我的表以某种方式由json组成，否则它们将无法工作。 在ajax调用之后，我能做些什么来重新加载表吗？ 补充：我不希望整个页面重新加载，而只是提交事件时的数据表。

$('#updateCatForm').on("submit", function(event){
    event.preventDefault();
    $.ajax({
        url:"../ajax/updateCat.php",
        method:"POST",
        data:$('#updateCatForm').serialize(),
        success:function(data){
            $('#updateCatForm')[0].reset();
            $('#cat-update').modal('hide');
            $('#message').html(data);
            //I put the table reload solutions here and nothing seemed to work :<
        }
    })
});

Answer 1

用这个

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

确保选择器相同。 或者您可以简单地存储在变量中并像这样使用它

var table = $('#example').DataTable();

然后在ajax之后

table.ajax.reload();

- -编辑 - -

table.ajax.reload({
    "ajax": {
           "url": '${ctx}/work/list_ajax.json',
           "type": 'POST',
           "data":{ 
              data:$('form').serialize()
           }
    } 
});

我对此不太确定，我没有尝试过，但这是获取数据并显示在表上的方法。 抱歉，我无法为您提供有效的代码段。 记住返回的数据应采用正确的格式，否则将无法正常工作。