DataTable.js Ajax加载部分数据集仅显示表头、<tbody>无数据问题求助

我一眼就发现了两个核心问题，导致你的DataTables只显示表头却加载不出数据：

1. 未向DataTables传递实际行数据 #

你在初始化DataTables时，把用来传递行数据的aaData（更推荐用标准的data选项）给注释掉了！DataTables虽然知道列的定义，但没有收到要展示的具体行数据，自然只会渲染表头。

2. 变量作用域的冗余问题（不影响功能但需修正） #

你在success回调里重复声明了var dataSet，这会屏蔽外层的全局dataSet变量——虽然这里全局变量没被用到，但容易造成代码混淆，建议去掉重复声明。

修改后的完整代码 #

<table id="example" class="display" cellspacing="0" width="100%">
</table>
<script>
var myUrl = "{% url 'django_url_withJSON' %}"
var my_columns = [];
$(document).ready(function(){
$.ajax({
url: myUrl,
type: 'GET',
dataType: 'json',
success: function(dict_json_from_py) {
console.log("-----dict_json_from_py--Data displays fine in Console--")
console.log(dict_json_from_py)
// 去掉重复的var声明，避免作用域混淆
const dataColumns = dict_json_from_py.data_json.columns;
$.each(dataColumns, function( key, value ) {
var my_item = {};
my_item.data = key; // 用数组索引对应数据位置，这个逻辑是正确的
my_item.title = value;
my_columns.push(my_item);
});
assignToEventsColumns(my_columns,dict_json_from_py);
}, // Close - success:
}) // Close - "ajax":
function assignToEventsColumns(my_columns,dict_json_from_py) {
var table = $('#example').DataTable({
"bAutoWidth" : false,
"serverSide": false,
"data": dict_json_from_py.data_json.data, // 关键：添加这行传递行数据
"columns" : my_columns,
})
}
});
</script>

额外补充说明 #

• 关于列定义的data属性：因为你的数据是数组形式（比如["CAT_C", 6.0, 69.0]），所以用数组索引（0、1、2）作为data的值是完全正确的，DataTables会自动对应到数组的对应位置。
• 如果你想让代码更简洁，可以用map方法替代$.each来构建列定义数组：

my_columns = dict_json_from_py.data_json.columns.map((colName, index) => ({
  data: index,
  title: colName
}));

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