代码之家 › 专栏 › 技术社区 › Eray Balkanli

HTML到JS数据表:排序或页面大小更改后仍显示删除的行?

datatable asp.net html jquery javascript

Eray Balkanli · 技术社区 · 6 年前

我有一个HTML表格 id:#mytable 在我的ASP.NET-4.5网页中,该网页在C网站中创建并发送到ASPX。在这个HTML表中,每行的末尾都有一个 DELETE 按钮如下:

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

单击此按钮时,将触发删除行(此)功能,代码如下:

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

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

此HTML表表示为数据表(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表变成了一个数据表。 我的问题是 ,从表中删除一行后,如果更改排序或每页的条目限制(默认值为10)等,我将开始看到在表中的页面上刚删除的行。似乎我的deleterow函数删除的行不是永久性的。如何解决此问题?任何帮助都将不胜感激。

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

EdT2:使用 $('#myTable').DataTable().rows(row).remove().draw(false); 在删除行的同时,修复了这个问题,不需要从数据库中重新读取数据。检查我的答案。

3 回复 | 直到 6 年前

NTR bbortt 6 年前

JavaScript是一种客户端技术,它不能与数据库通信。您的表是使用服务器端.NET代码从数据库生成的。要完成所需的操作,还需要删除数据库中的行。要与服务器端代码通信,可以使用Ajax: AJAX introduction . Ajax是一个大主题,您可能需要做更多的研究。

因此,在delete row函数中,您必须像现在这样删除行客户机端,然后使用ajax删除行服务器端。

希望它有帮助!

J E Carter II 6 年前

您必须用一个新的Ajax调用或转换的对象重新初始化数据表。删除代码只提取呈现的行,而不是驱动它的数据,因此当调用带排序的重画时,它正确地呈现模型的状态,而不管DOM中发生了什么突变。

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

Eray Balkanli 6 年前

正如@NTR和@J E Carter II所说,重新读取数据完美地解决了这个问题。然而,我在这里的主要目的并不是从数据库中重新读取数据,我正在寻找一个解决方案来提供这些数据,并找到了一些东西。我所做的就是改变世界 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还提供了服务器端的解决方案: Deleting specific rows from DataTable

编辑:请注意 DeleteRowFromMyDatabase 收益率 true 移除后,单位为dB。