У меня есть ниже MCVE с примером таблицы из tablesorter @ github
Нажатие на заголовок таблицы сортирует таблицу.Когда я добавляю эту строку $('table#myTable').floatThead();, которая комментируется в этом примере, она перестает работать.
$('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>
Я случайно нашел очень простое решение: порядок имеет значение!Просто добавьте $('table#myTable').floatThead(); ПОСЛЕ , была вызвана функция tablesorter().
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>