Html到JS Datatable :在排序或页面大小更改后仍然显示已删除的行？

Question

我在asp.net-4.5网页中有一个带有id:#mytable的html表，它是在c#站点中创建并发送到aspx的。在这个Html表中，每行的末尾都有一个DELETE按钮，如下所示：

...
html.Append("<td><input type=\"button\" runat=\"server\" value=\"Delete\" onclick=\"deleteRow(this)\" /></td>");

单击此按钮时，将使用以下代码触发deleteRow( this )函数：

btn.parentNode.parentNode.parentNode.removeChild(row);

当上面的这一行运行时，有关行立即被删除，我不再在屏幕上看到该行。

此html表表示为datatable (javascript)，如下所示：

$('#myTable').on('error.dt', function (e, settings, techNote, message) {
                            console.log('An error has been reported by DataTables: ', message);
                        }).DataTable({ fixedColumns: true,
                        "columnDefs": [{
                            "width": '60%',
                            "defaultContent": "-",
                            "targets": "_all"
                        }]
                    });;

这也很好，我的html表变成了datatable。我的问题是，在我从表中删除一行之后，如果我更改了每页的排序或条目限制(默认情况下为10)等等，我就开始看到刚才在页面上删除的行，在表中。我的deleteRow函数似乎不会永久删除行。我怎样才能解决这个问题？任何帮助都将不胜感激。

编辑:我需要刷新页面后，删除按钮点击JS：document.location.reload(true)和page_load重新读取数据，以解决问题。谢谢@NTR和@J E Carter II

EDIT2:在删除行的同时使用$('#myTable').DataTable().rows(row).remove().draw(false);解决了这个问题，而不需要从DB重新读取数据。查查我的答案。

Answer 1

正如@NTR和@J E卡特二世所言，重新阅读数据完全解决了这个问题。不过，我在这里的主要目的不是重新读取DB中的数据，我正在寻找一个解决方案，提供这种解决方案，并找到了一些东西。我所做的就是将行btn.parentNode.parentNode.parentNode.removeChild(row);转换为$('#myTable').DataTable().rows(row).remove().draw(false);，在刷新表之后，它工作得很好，在屏幕上看不到删除的数据。以下是完整的ajax函数：

var row = btn.parentNode.parentNode;
$.ajax({
           type: 'POST',
           url: 'DataManagementPage.aspx/DeleteRowFromMyDatabase',
           data: JSON.stringify({ id: id, grId:grID, city: city }),
           contentType: 'application/json; charset=utf-8',
           dataType: 'json',
           success: function (msg) 
           {
              $('#myTable').DataTable().rows(row).remove().draw(false);   
           }
});

提供的主题@NTR还在服务器端提供了一个解决方案：从DataTable中删除特定行

编辑:请注意，DeleteRowFromMyDatabase在DB中删除后返回true。

Answer 2

Javascript是一种客户端技术，它无法与数据库通信。您的表是通过服务器端.NET代码从数据库生成的。要完成所需的任务，还需要删除数据库中的行。要与服务器端代码通信，可以使用AJAX：AJAX游戏攻略。AJAX是一个很大的课题，您可能需要做更多的研究。

因此，在您的deleteRow函数中，您必须像偶尔使用ajax那样删除行客户端，删除行服务器端。

希望能帮上忙！

Answer 3

您必须使用新的ajax调用或变异对象重新初始化数据表。您的删除代码只是取出呈现的行，而不是驱动它的数据，因此当您用排序调用重绘时，不管DOM中发生了什么突变，它都正确地呈现了模型的状态。

我知道你说你不想重读数据，但这是正确的做法。远程数据是呈现的数据表的真实来源。