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

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来添加新单元格，更改某个单元格的innerHTML或从表格中删除特定单元格。