Question

我有这个html数据表，其中每个表格单元格都是可编辑的。我可以编辑单元格值并暂时保存。但是当我更新页面时它会丢失。所以我尝试在excel文件中保存html实例，以便将来可以看到更新的单元格。

下面的功能显示控制台中编辑的值

$(document).ready(function() {
  var table = $('#example').DataTable();
  table.MakeCellsEditable({
    "onUpdate": myCallbackFunction

  });

  function myCallbackFunction(updatedCell, updatedRow, oldValue) {
    console.log("The new value for the cell is: " + updatedCell.data());
    console.log("The old value for that cell was: " + oldValue);
    console.log("The values for each cell in that row are: " + updatedRow.data());
    updatedCell.data();
    updatedRow.data();
    table.draw();
  }
});

这是我调用python函数的Ajax：

$("#sa").click(function() {
  $.ajax({
    url: '/save',
    type: 'POST',
    success: function(response) {
      alert('ok')
    }
  })
});

基本上我的python函数接受了页面的源代码并将其保存在excel中。但问题是我的表正在编辑，但脚本正在保存旧值。当我使用chromes检查元素时，我可以看到更新值，但是当我使用View页面源看到它时，我会看到旧的值。

有人可以告诉我如何获取更新的html页面源并使用ajax发送它

Answer 1

page source和inspect element之间的主要区别是：

页面来源显示最初响应的服务器，即从服务器发送的实际HTML。

Inspect Element 在JS操作后显示DOM的当前状态。

使用整个初始页面的源/ HTML生成

DOM 。

这就是为什么您的页面源始终相同的原因。

您可以做的是在您的ajax中发布document的html内容以获取最新的网页来源。

以下内容可帮助您将更新的DOM源代码转换为字符串：

document.documentElement.innerHTML

虽然不确定为什么需要发布源代码，因为您只能发布更新的值并相应地更新数据库。

Answer 2

查看DataTables State saving，这是插件[stateSave: true]中的一个选项，它使用localstorage和sessionStorage来保留表格的状态。

示例：

$(document).ready(function() {
    $('#example').DataTable( {
        stateSave: true
    } );
} );

由于状态已保存，您只需在每次重新加载页面时检索数据。

更新后保存html实例

2 个答案: