DataTable 更新现有行问题 ajax

Question

当提交 jquery 对话框时，我有如下 ajax 响应

<tr bgcolor="" id="row_4">
  <td><p>ffwrwrqwrvqwerf</p></td>
  <td>Active</td><td><a href="" class="link_btn"  id="4_edit">Edit</a> | <a href="" class="link_btn"  id="4_delete">Delete</a></td>
</tr>

我需要将数据表行 #row_4 修改为 ajax 响应。

// msg is the variable which stores the ajax response.

 $('#lstCategories').DataTable().row($('#row_'+$('#formid').val())).data($(msg)).draw();

这给我一个错误。当我在语句 $('#lstCategories').DataTable().row($('#row_'+$('#formid').val())).data($(msg)).draw(); 中放置变量 msg 而不是 $(msg) 时，它在第一个 td 中给出 '<'，在第二个 td 中给出 't'，在中给出 'r'第三个 td 但没有错误。

Answer 1

您的 ajax 结果已经有了 <tr>。所以你可以删除特定的行，你可以添加一个新行

请检查演示代码

    $(document).ready(function () {
        $('#myTable').DataTable();

        $("#editButton").click(function () {
            var tbl = $('#myTable').DataTable();
            tbl.row("#row_2").remove().draw();
            var tblRow = "<tr id='row_2'><td>Value 3 - edited</td><td>Value 4 -edited</td></tr>";
            tbl.rows.add($(tblRow)).draw();
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" />
<table id="myTable">
    <thead>
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
        </tr>
    </thead>
    <tbody>
        <tr id="row_1">
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr id="row_2">
            <td>Value 3</td>
            <td>Value 4</td>
        </tr>
        <tr id="row_3">
            <td>Value 4</td>
            <td>Value 5</td>
        </tr>
    </tbody>
</table>

<input id="editButton" type="button" value="Edit" />

DataTable 更新现有行问题 ajax

DataTable update existing row issue ajax

jquery

datatables-1.10