javascript - JQuery TableSort 不适用于 JQuery floatThead
问题描述
我有一个来自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>
解决方案
我偶然发现了一个非常简单的解决方案:顺序很重要!只需在调用函数$('table#myTable').floatThead();
后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>
推荐阅读
- java - 这段代码中的 java 关键字“this”是多余的吗?
- ruby - 在 Windows 上的 JRuby 9.2.8.0 上安装 wdm gem
- reactjs - 无法将类组件转换为功能组件
- excel - 工作表类的运行时错误“1004”PasteSpecial 方法失败(仅当 CHROME 打开时)
- leaflet - 更改传单归属控制位置
- android - Flutter如何达到父小部件文本表单字段的值?
- javascript - 在 Node.js 中使用 TLS/SSL 隐式加密连接到 FTP 服务器
- google-app-engine - 使用 Google App Engine php55 或 php7 将任意大文件下载到 Cloud Storage 的解决方案是什么?
- reactjs - 如何以编程方式将焦点设置在输入上
- python - python中的INT到STRING转换