Fetch获取JSON自动生成的表格无法排序问题求助

我明白你遇到的困扰了——Sortable插件在硬编码表格里能正常排序，但从API拉取数据动态生成的表格就完全没反应。这其实是个很常见的DOM时机问题，咱们来一步步搞定它：

问题根源 #

Sortable插件默认会在页面DOM加载完成后，自动扫描页面上带有data-sortable属性的表格并初始化排序功能。但你的表格是在API请求完成后才动态创建的，这时候插件的自动初始化流程已经跑完了，自然不会处理这个晚出现的表格。

解决方案 #

在你把动态生成的表格挂载到DOM之后，手动调用Sortable的初始化方法，让它识别并处理这个新表格。

修改后的关键代码片段 #

在你的代码最后，把表格添加到容器的步骤之后，加上这一行：

Sortable.initTable(table);

完整的修改后代码段如下：

// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
// 手动初始化Sortable表格
Sortable.initTable(table);

为什么这样有效？ #

Sortable.initTable()方法是专门用来手动初始化单个表格的，不管表格是何时创建的。在表格挂载到DOM后调用这个方法，就能让Sortable插件为动态生成的表格绑定排序事件，实现你想要的排序功能。

另外也帮你确认了表格结构：你已经正确创建了<thead>标签，这很好——Sortable依赖标准的表头结构才能正常工作，这部分你已经做对了。

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