Jquery DataTables解决 Cannot reinitialise DataTable 问题

本文介绍了Datatables在多次初始化同一表格时出现的问题及其解决方案。当模态框内含有多个表格时,若使用destroy:true会导致表格展示不全及错误提示。文章推荐使用retrieve:true来避免这些问题,并确保所有表格能够正确加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因:datatables不允许多次初始化某一表格
解决方法:在初始化时设置destroy:true
但在一个页面的模态框中有多个表格,如果用上述解决方案,在关闭模态框再重新点开后,会报错,同时表格个数也没有完全展示
正常情况:
这里写图片描述

关闭后再次点开:
报错信息:Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.
这里写图片描述

这里写图片描述
解决方案:使用 retrieve:true,代替destroy:true
retrieve:true表示我已经知道初始化选项不能在初始化之后更改,只是希望返回DataTable实例。
官网关于Cannot reinitialise DataTable错误信息的解决方案:https://datatables.net/manual/tech-notes/3

### 解决 jQuery DataTables 中 `TypeError: Cannot read properties of undefined (reading 'style')` 的方法 在处理 jQuery DataTables 插件时,遇到 `TypeError: Cannot read properties of undefined (reading 'style')` 错误通常意味着某些配置项或HTML结构存在问题。以下是详细的解决方案: #### 1. 检查 aoColumns 和 HTML 列的一致性 确保 `aoColumns` 字段中的列数与 HTML 表格 `<th>` 或者 `<td>` 标签的数量相匹配。任何不一致都可能导致该错误。 ```javascript // 正确的 aoColumns 配置应与表格头保持同步 "aoColumns": [ {"mData": "id"}, {"mData": "name"}, {"mData": "position"} ], ``` 如果表格头部有额外条件渲染(如 v-if),则需确保这些条件同样应用于对应的主体部分[^4]。 #### 2. 确认数据源字段名正确无误 验证通过 AJAX 请求获取的数据对象属性名称是否与 `aoColumns` 定义相符。例如,在服务器端返回 JSON 数据时,确认键名完全对应于客户端设置的 `"mData"` 值。 ```json [ { "id": 1, "name": "John Doe", "position": "Developer" } ] ``` #### 3. 排除不必要的排序选项 对于不需要排序的列,可以禁用其可排序特性,并检查是否有遗漏的列被标记为不可见但仍尝试访问样式属性的情况。 ```javascript "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 2] // 对第1列(id)和第3列(position)关闭排序功能 }] ``` 以上措施有助于防止因试图操作不存在的对象而导致的异常抛出。 #### 4. 初始化前清理旧实例 有时重新初始化同一个表格可能会引发冲突,因此建议先销毁之前的实例再创建新的。 ```javascript if ($.fn.DataTable.isDataTable('#example')) { $('#example').DataTable().destroy(); } $('#example').DataTable({ // 新的配置... }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值