Datatable中rows().data().each()函数无法运行，求原因排查

你遇到的核心问题是Ajax数据加载的异步特性导致的：当你在初始化DataTable后立刻调用oTable.rows().data().each()时，表格的Ajax请求还没完成，数据还没加载到表格里，此时rows().data()返回的是空集合，所以你的回调函数根本不会触发。

解决步骤： #

1. 用initComplete回调确保数据加载完成后执行遍历
   DataTables提供了initComplete选项，它会在表格初始化全部完成（包括Ajax数据加载、DOM渲染）后触发，把你的遍历逻辑放在这里面就能保证能拿到所有行数据。

2. 修正伪元素的操作错误
   你代码里试图直接移除伪元素td.childShow:before的类是行不通的——伪元素不属于DOM节点，jQuery无法直接操作它们。正确的做法是通过给父元素添加/移除自定义类，再用CSS来控制伪元素的显示状态。

修正后的完整代码： #

首先调整CSS（假设你原来的.childShow:before是用来显示展开图标之类的样式）：

.childShow:before {
  /* 你原来的伪元素样式示例 */
  content: "+";
  display: inline-block;
  margin-right: 5px;
}
/* 没有子项时隐藏伪元素 */
.childShow.no-child:before {
  display: none;
}

然后修改DataTable的初始化代码：

function(data) {
  var oTable = $('#childInfoTable').DataTable({
    ajax: 'childData',
    "dom": 'rt',
    select:"single",
    "columns": [
      {
        "className": 'childShow',
        "orderable": false,
        "defaultContent": '',
        width:"15px"
      },
      { "data": "id" },
      { "data": "name" },
    ],
    "order": [[1, 'asc']],
    // 新增initComplete回调，确保数据加载后执行遍历
    initComplete: function(settings, json) {
      var api = new $.fn.dataTable.Api(settings);
      api.rows().data().each(function(value, index){
        var node = api.row(index).node();
        if(value.container_cnt === 0){
          // 给目标td添加类，间接控制伪元素样式
          $(node).find("td.childShow").addClass("no-child");
        }
      });
    }
  });
}

额外说明： #

• 如果你不需要等待DOM渲染完成，也可以用xhr事件（在Ajax请求完成后触发），但initComplete更适合需要操作DOM节点的场景。
• 遍历行时，api.row(index).node()可以直接拿到对应的<tr>节点，后续的jQuery操作就能正常定位元素了。

内容的提问来源于stack exchange，提问作者SimplyKz