datatables 初始化顺序不当会导致实例无法感知后续 dom 的变更（如用户手动勾选/取消复选框），将 datatables 初始化代码移至所有相关脚本（含事件监听）之后，可确保实例正确捕获当前 dom 状态。
datatables 初始化顺序不当会导致实例无法感知后续 dom 的变更（如用户手动勾选/取消复选框），将 datatables 初始化代码移至所有相关脚本（含事件监听）之后，可确保实例正确捕获当前 dom 状态。
在使用 DataTables（v2.1.8）动态管理含 的表格时，一个常见但易被忽视的问题是：DataTables 实例与真实 DOM 状态脱节。例如，用户在页面加载后手动取消勾选某复选框，通过 my_tbl.rows().every(...) 遍历获取的复选框状态仍为初始化时的值，而非当前实际状态。
根本原因在于 JavaScript 执行顺序与 DOM 初始化时机不匹配。在原始结构中：
{% include 'my_tbl_template.html' %}
<script>let my_tbl = $('#my_tbl').DataTable({...})</script><script type="text/javascript" src="my_scripts.js"></script>
my_scripts.js 中定义了 $(document).ready(...) 及 printCheckboxStatusTbl() 等函数，但此时 my_tbl 实例已被提前创建——而该实例在初始化时仅“快照”了当时 DOM 的 checkbox 状态；后续 my_scripts.js 中绑定的 change 事件虽能响应 DOM 变更，但 DataTables 自身并不自动追踪这些动态变更（它不是响应式数据绑定框架）。
✅ 正确做法是：确保 DataTables 实例在所有依赖逻辑（尤其是事件监听器）就绪后再创建。调整 HTML 脚本加载顺序如下：
{% include 'my_tbl_template.html' %}
<script type="text/javascript" src="my_scripts.js"></script><script>
// ✅ 在 my_scripts.js 加载并执行完毕后，再初始化 DataTables
let my_tbl = $('#my_tbl').DataTable({
// 你的配置项...
});
</script>
这样，当 my_scripts.js 中的 $(document).ready(...) 执行时，DOM 已渲染完成，且 my_tbl 尚未创建；待其在最后初始化时，会基于最新、稳定的 DOM 状态构建内部缓存与节点引用，从而保证 row().node() 返回的行节点与当前真实 DOM 完全一致。
? 补充建议：
- 若需在 DataTables 中持久化 checkbox 状态（如分页/排序后保持），应结合
row().data()或自定义列渲染器（render）+columns.render，将 checkbox 状态映射为数据字段； - 避免直接依赖
$(rowNode).find(...)判断状态作为业务逻辑依据，推荐统一通过$('input[type=checkbox]', rowNode).prop('checked')获取实时属性值； - 使用
my_tbl.on('draw.dt', ...)监听重绘事件，在每次表格刷新后同步更新 UI 状态。
至此，printCheckboxStatusDom() 与 printCheckboxStatusTbl() 的输出将完全一致，DataTables 实例真正成为 DOM 状态的可靠代理。
