如何解决执行编辑页面返回列表页面后重新加载数据表时,无法重新初始化DataTable 编辑
在列表页面上,用户可以通过单击“编辑”按钮来编辑信息,并打开详细信息页面以编辑数据。 编辑完成后返回列表页面。这是我的源代码
我的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
初始化选项。
根据要传输和处理的数据量,我会选择其中一个。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。