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

编程问答 2022-06-03

问题描述

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

我的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",{ "data": "site_code","name" : "Site","title" : "Site",{ "data": "user_roles","name" : "Roles","title" : "Roles",{ "data": "user_areas","name" : "Areas","title" : "Areas",{ "data": "team_code","name" : "Team","title" : "Team",{ "data": "status","name" : "Status","title" : "Status",{ "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警告：表id = userTable-无法重新初始化DataTable。

谢谢。

解决方法

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

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

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

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

编辑

从您那里收集到更多信息之后，我现在可以了解您正在尝试做什么。

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

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

根据要传输和处理的数据量，我会选择其中一个。

datatablesdatatables-1.10javascriptjquery