静态网站中的表分页问题
Tables pagination issue in static website
我有一个表格，其中包含许多YouTube视频，如图所示，我不希望所有这些视频同时显示。我能做什么？我尝试了datatables.net和tablesorter.com
<table id="table_id" style="width: 100%;">
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Communications' second year</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
<td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
<td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
<td class='td'><div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Hello World</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ToACE9BTSCA?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr class="loading">
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>The Internet connection has</strong></div>
<iframe src="http://www.youtube.com/embed/w9DTUjrPTd0?wmode=opaque" frameborder="0" allowfullscreen width="100%" height="100%" ></iframe>
</td>
<td class='td'>
<div class="layout" style="position: absolute; z-index: 1; width: 485px; height: 280px; " onclick="this.style.display='none';"><strong>Arsenal vs man city <br> 3-2 <br> 23/5/215 <br> أرسنال ضد مانشيستر سيتي</strong></div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/aDBDowU_lqc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
</table>数据表应该非常适合您要做的事情。 根据您拥有的行数，旧版本的IE可能会因为您放入dom中的所有数据而不堪重负，但这不是特定于数据表的，更多的是静态网站的症状，而不是使用数据驱动的网站。
您没有具体说明为什么您提到的两个选项不起作用，也许这对本论坛来说是一个更好的问题。 但是，如果您愿意再次娱乐数据表，只需执行以下步骤：
- 包括 jQuery
- 包括数据表
正确编码您的表 - 这意味着除了您拥有的内容之外，还使用 thead 和 tbody 标签，没有这个数据表将无法工作。
... ...DataTable'通过将以下内容放在JavaScript中准备好的文档中来化您的表：
$（"#table_id"）。数据表（）;
利润！
在这里摆弄
code here because so is being fickle
相关文章：
- 图像滑块中的分页问题
- 在ajax分页视图(cakephp）中显示adsense的问题
- ajax请求上的kendo分页问题
- 打印时每页上的分页符和表头.打印表 CSS 问题
- 引导轮播分页/幻灯片编号问题
- 理解使用 JavaScript 在分页中加载数据的概念时出现问题
- 历史的ajax分页问题.back(）
- 页面id出现问题的分页
- Ng-repeat在另一个Ng-repeat中导致分页问题
- jquery分页与css的逻辑问题
- 使用jquery插件进行分页，当加载50k时记录导致整个系统冻结.如何解决这个问题
- 与其他解决方案相比，内置的ng表分页在性能上存在问题
- wordpress的分页问题
- 无限滚动分页javascript实现问题
- 使用Jquery的基本分页问题
- 单击复选框显示/隐藏GridView列，导致GridView分页问题
- jqGrid分页问题
- ASP.NET的Gridview分页问题
- 静态网站中的表分页问题
- AngularJS ng-grid分页问题-按钮没有被禁用
