javascript - HTML表格一分为二，并排显示在同一页面上
问题描述
我有一个包含 2 列的 HTML 表格，我希望访问者能够对其进行排序（标题、日期）和过滤。我找到了一个非常大的 jQuery 可以做到这一点，但是表格又长又窄，所以我想把它分成两半并并排显示。在小屏幕上，下半场应该低于上半场。过滤后的下半场可能只是空着。
对列表执行此操作的其他方法没有任何效果。如果有一个使用 JavaScript 的直接解决方案，可以将它分成两半“显示”，那就太好了。
我在想，也许可以创建2个容器，使用分页在左侧显示表格的前半部分，在右侧显示第二页，后半部分？
另外，很抱歉我要求太多，但你能让它与“iframe”一起工作吗？理想情况下，我只编辑一个 HTML 页面，表格嵌入到其他几个页面中。
我使用了 SpryMedia 的 jQuery，位于： http ://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
我不知道 JavaScript，所以我所能做的就是根据我的情况（2 列表）对其进行调整。表的长度会随时间变化，所以如果它总是计算行数并将自己分成两半，那就太好了。2 列 200px 占用小于最大容器宽度的一半。
如果这不起作用，我将不得不恢复到列表，但是我遇到了按标题和日期对条目进行排序的问题（此方法只能使用一个标准）。所以我必须在标题字符串中隐藏一个 8 位前缀（作为日期）但是我在互联网上没有找到可以：
- 升序排序。和描述。日期的（隐藏）前 8 个字符（数字）的条目；
- 按第 9 个字符（标题的第一个字母）排序；
- 并为任何字符组合提供过滤选项。
有了这张桌子，我就解决了上述问题，但我不能把桌子放在并排的两半中以占用更少的空间。
谢谢！
贝娄是一个简化版本。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;}
</style>
</head>
<body>
<div class="center">
<script>$(document).ready(function() {
/*// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );} );*/
// DataTable
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();}} );} );}});} );
</script>
<table id="example" class="" style="width:100%;">
<thead>
<tr>
<th style="text-align:left;width:150px">Place <i class="fa fa-sort"></i></th>
<th style="text-align:left;width:150px">Date <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td>Edinburgh</td>
<td>2011/04/25</td>
</tr>
<tr>
<td>Tokyo</td>
<td>2011/07/25</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2009/01/12</td>
</tr>
<tr>
<td>Edinburgh</td>
<td>2012/03/29</td>
</tr>
<tr>
<td>Tokyo</td>
<td>2008/11/28</td>
</tr>
<tr>
<td>New York</td>
<td>2012/12/02</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2012/08/06</td>
</tr>
<tr>
<td>Tokyo</td>
<td>2010/10/14</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2009/09/15</td>
</tr>
<tr>
<td>Edinburgh</td>
<td>2008/12/13</td>
</tr>
<tr>
<td>London</td>
<td>2008/12/19</td>
</tr>
<tr>
<td>Edinburgh</td>
<td>2013/03/03</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2008/10/16</td>
</tr>
<tr>
<td>London</td>
<td>2012/12/18</td>
</tr>
<tr>
<td>London</td>
<td>2010/03/17</td>
</tr>
<tr>
<td>London</td>
<td>2012/11/27</td>
</tr>
<tr>
<td>New York</td>
<td>2010/06/09</td>
</tr>
<tr>
<td>New York</td>
<td>2009/04/10</td>
</tr>
<tr>
<td>London</td>
<td>2012/10/13</td>
</tr>
<tr>
<td>Edinburgh</td>
<td>2012/09/26</td>
</tr>
<tr>
<td>New York</td>
<td>2011/09/03</td>
</tr>
<tr>
<td>New York</td>
<td>2009/06/25</td>
</tr>
<tr>
<td>New York</td>
<td>2011/12/12</td>
</tr>
<tr>
<td>Sydney</td>
<td>2010/09/20</td>
</tr>
<tr>
<td>London</td>
<td>2009/10/09</td>
</tr>
<tr>
<td>Edinburgh</td>
<td>2010/12/22</td>
</tr>
<tr>
<td>Singapore</td>
<td>2010/11/14</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2011/06/07</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2010/03/11</td>
</tr>
<tr>
<td>Tokyo</td>
<td>2011/08/14</td>
</tr>
<tr>
<td>Sydney</td>
<td>2011/06/02</td>
</tr>
<tr>
<td>London</td>
<td>2009/10/22</td>
</tr>
<tr>
<td>London</td>
<td>2011/05/07</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2008/10/26</td>
</tr>
<tr>
<td>Edinburgh</td>
<td>2011/03/09</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2009/12/09</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2008/12/16</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2010/02/12</td>
</tr>
<tr>
<td>San Francisco</td>
<td>2009/02/14</td>
</tr>
<tr>
<td>London</td>
<td>2008/12/11</td>
</tr>
<tr>
<td>New York</td>
<td>2008/09/26</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
解决方案
另一种方法，在这里解决： Sort HTML list by 2 criteria
是有一个字符串列表，其中（对于两列数据）字符串被格式化为Title - YYYY/MM/DD
与表格不同，使用 CSS 可以将列表分成两部分并并排显示column-count:2;，并且由于@Cristian Sarghe 和 W3 Schools，按日期（字符串的后半部分）对其进行排序的功能如下：
function sortListDate() {
var list, i, switching, b, c, shouldSwitch, dir, switchcount = 0;
list = document.getElementById("List_Id_Name");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
// Make a loop that will continue until no switching has been done:
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("LI");
//substr(list.getElementsByTagName("LI").length - 8);
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should switch place with the current item, based on the sorting direction (asc or desc): */
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase().slice(b[i].innerHTML.indexOf('- ')) > b[i + 1].innerHTML.toLowerCase().slice(b[i+1].innerHTML.indexOf('- '))) {
/* checking the string for Date after "- " */
/* if next item is alphabetically lower than current item, mark as a switch and break the loop: */
shouldSwitch = true;
break;}}
else if (dir == "desc") {
if (b[i].innerHTML.toLowerCase().slice(b[i].innerHTML.indexOf('- ')) < b[i + 1].innerHTML.toLowerCase().slice(b[i+1].innerHTML.indexOf('- '))) {
/* if next item is alphabetically higher than current item, mark as a switch and break the loop: */
shouldSwitch= true;
break;}}}
if (shouldSwitch) {
/* If a switch has been marked, make the switch and mark that a switch has been done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// Each time a switch is done, increase switchcount by 1:
switchcount ++;}
else {
/* If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;}}}}
推荐阅读
- xamarin - Xamarin android - 尝试在空对象引用上调用虚拟方法 sendBroadcast()
- c++ - std::map 到 std::list 导致 SIGSEGV
- c - Pcap_inject 发送太多消息
- kendo-ui - 将滚动条添加到 kendo.alert 对话框
- python - IndexError：元组索引超出范围
- phpstorm - PhpStorm - 初始化所有方法的字段（不仅用于 __construct）
- javascript - 在将属性分配给 JavaScript 中的对象之前验证/预处理属性
- java - 如何在soapui中运行Jar文件
- javascript - 在将产品添加到购物车之前，如何禁用“查看购物车”btn？
- php - MYSQL PDO 从 fetchAll 获取多行不起作用