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

我对此并不完全确定，我没有试一试，但是沿着这条线来获取数据并显示在桌面上。对不起，我无法为您提供工作片段。记住返回的数据应采用适当的格式，否则将无效。

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

1 个答案: