执行编辑页面返回列表页面后重新加载数据表时无法重新初始化数据表

Question

在列表页面上，用户可以通过单击编辑按钮来编辑信息并打开详细信息页面以编辑数据。 编辑完成后返回列表页面。这是我的源代码

我的 JS listUser.js 嵌入在 listusers.jsp 底部的 jsp 文件中

<div class="c-body">
  <main class="c-main">
    <div class="container-fluid">
      <div class="fade-in" id="content">
        <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-sm-4">List Users</div>
        <div class="col-sm-8 text-right">
            <button id="create_user" type="button" class="btn btn-primary">Tạo mới</button>
        </div>
      </div>
    </div>
    <div class="card-body">
      <table id="userTable" class="table table-striped table-bordered datatable">
        <thead>
          <tr>
    <th>Username</th>
    <th>Full Name</th>
    <th>Site</th>
    <th>Roles</th>
    <th>Areas</th>
    <th>Team</th>
    <th>Status</th>
    <th>Actions</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
        </div>
        <script src="${contextPath}/user/listUser.js"></script>
      </div>
    </div>
  </main>
</div>

listUser.js

$( document ).ready(function() {
    var userTable = $('#userTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "pageLength": 10,
        "ajax": {
            "url": "/user/paginated",
            "data": function ( data ) {
         }},
        "columns": [
                    { "data": "username", "name" : "Username", "title" : "Username", "defaultContent" : ""},
                    { "data": "full_name", "name" : "Full Name" , "title" : "Full Name", "defaultContent" : ""},
                    { "data": "site_code", "name" : "Site" , "title" : "Site", "defaultContent" : ""},
                    { "data": "user_roles", "name" : "Roles", "title" : "Roles", "defaultContent" : ""},
                    { "data": "user_areas", "name" : "Areas", "title" : "Areas", "defaultContent" : ""},
                    { "data": "team_code", "name" : "Team", "title" : "Team", "defaultContent" : ""},
                    { "data": "status", "name" : "Status", "title" : "Status", "defaultContent" : ""},
                    { "targets": "no-sort", "orderable": false, "data": "null", "name" : "Thao tác", "title" : "Thao tác", "defaultContent" : "<button id='updateUser' name='updateUser' class='btn btn-primary btn-edit' type='button' aria-pressed='true'>Sửa</button>"}
                ]
    });

    $('#userTable').on('click', '.btn-edit', function(){
       var data = userTable.row( $(this).parents('tr') ).data();
       //alert(data.user_id);
       let url = "user/updateUser?id=" + data.user_id;
       $("#content").load(url);
    });

    $(document).on('click', '#update_user', function(){
            updateUser();
    });

    function updateUser() {
        ...

        var data = {
            ...
        };

        var json = JSON.stringify(data);

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              myObj = JSON.parse(this.responseText);
              if(myObj.status == "1"){
                  $("#content").load("user/list");
              }
            }
         };
        xhr.open("POST", "/user/update");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.send(json);
    }
});

我发生的问题DataTables 警告：table id=userTable - 无法重新初始化 DataTable。

谢谢。

Answer 1

来自DataTable Docs（搜索引擎中的第一个结果以及您提供的警告消息）：

DataTables 具有广泛的配置选项，可用于在初始化时自定义表格，但仅限于初始化时。初始化 DataTable 后，任何尝试使用这些选项都会导致错误。

简单地说，DataTables 不允许在初始化时以外的任何时间更改初始化选项。初始化后对表的任何操作都必须通过API [...]

您没有展示如何初始化 DataTable，因此我无法进一步帮助您，除非您使用更多信息更新您的答案。

编辑

从你那里收集到更多信息后，我现在可以理解你想要做什么了。

本质上：DataTables 期望它的 DOM 元素由自己管理。初始化 DataTable 后，不应操作任何与其相关的 DOM。如果要显示用户编辑页面之类的内容并在保存后返回表格，则需要选择以下 2 个选项之一：

• 在显示用户编辑页面之前完全卸载 DataTable，并在保存用户数据并从服务器收集新的 DataTable 数据后重新初始化它。
• 不要分离DataTable DOM：以模式显示用户表单，或者隐藏DataTable而不是删除它，并在保存用户数据后再次取消隐藏。更新后的数据需要重新注入到一个活的 DataTables 中，我认为这需要使用 .ajax.data 初始化选项。

取决于传输和处理的数据量，我会选择其中一个。