如何在不刷新页面的情况下刷新数据表

Question

我想在添加、删除和更新后刷新数据表。有人可以帮忙吗？我将选择房间和 html 部分放在下面。我也有单独的 ajax 代码片段，我确实会更新添加和删除。我想在添加更新和删除后刷新表。

//HTML
<table id="datatables" class="table table-striped table-no-bordered table-bigboy" cellspacing="0" style="width:100%;">
     <thead>
         <tr>
            <th class="disabled-sorting">Room Plan</th>
            <th>Name</th>
            <th class="disabled-sorting text-right">Actions</th>
         </tr>
     </thead>
     <tfoot>
     <tr>
          <th>Room Plan</th>
          <th>Name</th>
          <th class="text-right">Actions</th>
     </tr>
      </tfoot>
        <tbody id="colmn">
            @*  *@
        </tbody>
</table>
//-------------------------SELECT ROOM ----------------------------
$.post("/Home/selectRooms", {}, function (data) {
    var ndx = 0;
    $.each(data.xroom_name, function (key, value) {
        var Xroom_name = data.xroom_name[ndx];
        var Xroom_plan = data.xroom_plan[ndx];
        var column =
          ('<tr>' +
            '<td>' +
            '<div class="img-container">' +
            '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
            '</div>' +
            '</td>' +
            '<td id="imgname">' + Xroom_name + '</td>' +
            '<td class="text-right">' +
            '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
            '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
            '</td>' +
            '</tr>');
        document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
        ndx++;
    });
});

Answer 1

你是如何建造你的桌子的？它是动态的吗？

如果是这样，在 Ajax 调用返回成功响应后，您可以更新用于构建表的对象，甚至可以调用正在构建表的函数。

如果它不是动态的，您可以简单地操作 DOM 添加新单元格，更改某个单元格的内部 HTML 或从表中删除特定单元格。