无法使用 sorttable.js 对 html 表进行排序答案

【问题标题】：Cant sort html table using sorttable.js无法使用 sorttable.js 对 html 表进行排序
【发布时间】：2016-11-30 13:53:44
【问题描述】：

我在尝试对动态创建的 html 表进行排序时遇到问题。我使用玉/哈巴狗创建它。我正在尝试使用在这里找到的 sorttable.js 脚本 http://www.kryogenix.org/code/browser/sorttable/ 。我对 html/javascript 还是有点陌生。因此，如果有一些明显的原因导致它无法正常工作，有人可以指出吗？

这是从模板生成的一些 html 代码

<html>
  <head>
   <script src="/path/to/sorttable.js"></script>
   <style>
    th.clickable:hover
    {
     color:green
    }    
    th, td
    {
     padding:5px;
    }
    th.clickable
    {
     cursor: pointer;    
    }
  </style>
 </head>
 <body>
 <script>
  var newTableObject = document.getElementById(tbl)
  sorttable.makeSortable(newTableObject)
 </script>
 <table class="sortable" id="tbl">
  <tr>
   <th class="clickable">id</th>
   <th class="clickable">value</th>
  </tr>
  <tr>
  <td>100</td>
  <td>100</td>
 </tr>
  <tr>
  <td>200</td>
  <td>200</td>
 </tr> 
</table>
</body>
</html>

目标是拥有它，因此当我单击标题时，它会按该列对表格进行排序。

【问题讨论】：

标签： javascript html pug sorttable.js

【解决方案1】：

如果这已经知道，请原谅...但是每当浏览器遇到脚本标签时，它就会被读取并执行。您是否尝试过将脚本标签放在表格之后？

【讨论】：

【解决方案2】：

您的代码执行时：

var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)

您的表格尚未渲染且不可用。所以你；将undefined 传递给sorttable.makeSortable 方法。您可以通过在获取元素后添加跟踪语句来测试这一点：

var newTableObject = document.getElementById(tbl)
console.log(newTableObject)

您应该等待表格呈现后触发此代码。像这样的：

onLoad = function(){
    var newTableObject = document.getElementById(tbl)
    sorttable.makeSortable(newTableObject)
}

并像这样声明：

// using jQ
$(document).ready( onLoad())

或者对于普通的 JS

<body onload="onload()">

【讨论】：

或者您可以尝试将脚本块移到声明的表格下方，尽管这不是最好、最明显的解决方案。
为我工作（即 onload 被调用且表未定义）codepen.io/jusopi/pen/pbKymd
在该示例中，当您单击 id 并对其赋值时，它会同时对它们进行排序（和反向排序）？
也在 jsbin 中对其进行了测试，因为这将显示一个更现实的示例 jsbin.com/febawuqoto/edit?html,output
我没有连接 sortable，只是连接了 UI 确实加载后必须推迟加载逻辑的部分。你仍然需要连接 sortable。