遇DataTables警告Non-table node initialisation (TBODY)，排查1小时未解决

兄弟，我太懂你排查一小时还卡壳、颈背酸痛的崩溃感了🥲。咱们直接说问题根源和解决方案：

问题出在哪？ #

你现在是把DataTables初始化到<tbody>元素（#category_data）上了，但DataTables的核心规则是必须绑定在整个<table>标签上，这就是那个警告的直接原因。

另外还有个隐藏坑：你先调用了show_categories()（异步AJAX加载数据），然后立刻执行$('#category_data').dataTable();——这时候AJAX还没返回数据，tbody是空的，就算绑定对了元素也可能出异常。

修复步骤&代码 #

第一步：给你的table加个专属ID

先修改HTML里的table标签，给它加个id（比如category_table），方便后续绑定：

<table id="category_table" class="table table-bordered table-sm table-hover datatable dt-responsive nowrap">
<thead>
<tr>
<th>Category</th>
<th>Action</th>
</tr>
</thead>
<tbody id="category_data"></tbody>
</table>

方案1：调整初始化时机（适配你现有代码）

把DataTables的初始化代码移到AJAX的success回调里——等数据加载完成、tbody有内容了再初始化，同时绑定到整个table上：

// 先调用加载函数，不要提前初始化DataTables
show_categories();

//展示所有分类的函数
function show_categories() {
$.ajax({
type: 'ajax',
url: base_url + 'Admin/Categories/fetch_categories',
async: true,
dataType: 'json',
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<tr>' +
'<td>' + data[i].category + '</td>' +
'<td style="text-align:right;">' +
'<button type="button" class="btn btn-xs btn-info" data-category_id="' + data[i].category + '"><em class="fas fa-edit"></em></button> ' +
'<button type="button" class="btn btn-xs btn-danger" data-category_id="' + data[i].category + '"><em class="fas fa-trash"></em></button>' +
'</td>' +
'</tr>';
}
$('#category_data').html(html);
// 重点：绑定到table元素，且在数据加载完成后执行
$('#category_table').dataTable();
},
error: function() {
console.log('加载分类数据失败，请检查接口');
}
});
}

方案2：用DataTables自带的AJAX功能（更规范）

其实DataTables本身就支持AJAX加载数据，不用自己手动拼接HTML，还能自动处理分页、排序这些功能，推荐试试这种写法：

// 直接初始化table，配置AJAX数据源
$('#category_table').dataTable({
ajax: {
url: base_url + 'Admin/Categories/fetch_categories',
dataType: 'json',
dataSrc: '' // 如果你的接口返回的是直接的数组（不是嵌套在data字段里），就加这个
},
columns: [
{ data: 'category' }, // 对应接口返回的category字段
{ 
data: null, // 自定义渲染操作列
render: function(data, type, row) {
return '<div style="text-align:right;">' +
'<button type="button" class="btn btn-xs btn-info" data-category_id="' + row.category + '"><em class="fas fa-edit"></em></button> ' +
'<button type="button" class="btn btn-xs btn-danger" data-category_id="' + row.category + '"><em class="fas fa-trash"></em></button>' +
'</div>';
}
}
]
});

为什么这样能解决？ #

• 把初始化目标从<tbody>改成了<table>，符合DataTables的初始化规则，警告自然消失。
• 确保DataTables在数据加载完成后再初始化，避免空表格导致的异常。

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