JQuery TableSort 不适用于 JQuery floatThead答案

【问题标题】：JQuery TableSort doesn't work with JQuery floatTheadJQuery TableSort 不适用于 JQuery floatThead
【发布时间】：2018-10-19 11:36:25
【问题描述】：

我有一个来自tablesorter@github的示例表的波纹管MCVE

单击表格标题对表格进行排序。当我添加此示例中注释的这一行 $('table#myTable').floatThead(); 时，它将停止工作。

知道问题是什么以及如何解决吗？

<html lang="en">
 <head>
   <title>JQuery table sorter with JQuery floatThead MCVE</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="https://rawgit.com/christianbach/tablesorter/master/jquery.tablesorter.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.1.2/jquery.floatThead.min.js"></script>
 </head>
 <body>
  <table id="myTable" class="tablesorter" border=1> 
  <thead> 
  <tr><th>Last Name</th><th>First Name</th><th>Email</th><th>Due</th><th>Web Site</th></tr> 
  </thead> 
  <tbody> 
   <tr><td>Smith</td><td>John</td><td>jsmith@gmail.com</td><td>$40.00</td> 
   <td>http://www.jsmith.com</td></tr> 
   <tr><td>Bach</td><td>Frank</td><td>fbach@yahoo.com</td><td>$50.00</td> 
   <td>http://www.frank.com</td></tr> 
   <tr><td>Doe</td><td>Jason</td><td>jdoe@hotmail.com</td><td>$100.00</td> 
   <td>http://www.jdoe.com</td></tr> 
   <tr><td>Conway</td><td>Tim</td><td>tconway@earthlink.net</td><td>$51.00</td> 
   <td>http://www.timconway.com</td></tr> 
  </tbody> 
  </table>   

  <script type="text/javascript">
   //$('table#myTable').floatThead();
   $(document).ready(function() { $("#myTable").tablesorter(); } 
   );
  </script>
 </body>
</html>

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

我偶然发现了一个非常简单的解决方案：顺序很重要！只需添加$('table#myTable').floatThead(); AFTER 函数tablesorter() 已被调用。

<html lang="en">
 <head>
   <title>JQuery table sorter with JQuery floatThead MCVE</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="https://rawgit.com/christianbach/tablesorter/master/jquery.tablesorter.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.1.2/jquery.floatThead.min.js"></script>
 </head>
 <body>
  <table id="myTable" class="tablesorter" border=1> 
  <thead> 
  <tr><th>Last Name</th><th>First Name</th><th>Email</th><th>Due</th><th>Web Site</th></tr> 
  </thead> 
  <tbody> 
   <tr><td>Smith</td><td>John</td><td>jsmith@gmail.com</td><td>$40.00</td> 
   <td>http://www.jsmith.com</td></tr> 
   <tr><td>Bach</td><td>Frank</td><td>fbach@yahoo.com</td><td>$50.00</td> 
   <td>http://www.frank.com</td></tr> 
   <tr><td>Doe</td><td>Jason</td><td>jdoe@hotmail.com</td><td>$100.00</td> 
   <td>http://www.jdoe.com</td></tr> 
   <tr><td>Conway</td><td>Tim</td><td>tconway@earthlink.net</td><td>$51.00</td> 
   <td>http://www.timconway.com</td></tr> 
  </tbody> 
  </table>   

  <script type="text/javascript">
   $(document).ready(function() { $("#myTable").tablesorter(); $('table#myTable').floatThead(); } 
   );
  </script>
 </body>
</html>

【讨论】：

奇怪，知道是什么原因吗？
@Carsten 不是真的，但我可以看到，floatThead 正在大量修改标题 <th> 对象。
在 floatThead 完成时，您的标头将被替换为虚拟标头。最好让表排序器将其事件绑定到表头，然后将其移出表。