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

Question

I want to refresh the datatable after adding, removing and updating. Can someone help ? I put the select room and html parts following. I also have separate ajax code snippets that I do update adding and deleting. I want to refresh the table after adding updating and removing.

//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

How are you building your table? Is it dynamic?

If so, after your Ajax call returning a success response, you can update your object that is being used to build the table or even call the function that is building it.

If it's not dynamic, you can simply manipulate the DOM to add a new cell, to change the innerHTML of a certain cell or remove a particular cell from the table.