javascript - 静态网站中的表格分页问题

Question

我有一个表格，其中包含许多 YouTube 视频，如 this pic 中所示而且我不希望所有这些视频同时显示。我能做些什么？我尝试了 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>

Answer 1

数据表应该能完美地满足您的需求。根据您拥有旧版本 IE 的行数，由于您将所有数据放入 dom，可能会不堪重负，但这不是特定于数据表的，更多是静态网站的症状，而不是使用数据驱动的网站。

您没有具体说明为什么您提到的两个选项不起作用，也许这对本论坛来说是一个更好的问题。但是，如果您愿意再次使用 DataTables，只需执行以下步骤:

1. 包含 jQuery
2. 包括数据表

3. 正确编码您的表格 - 这意味着除了您拥有的标签外，还使用 ​​thead 和 tbody 标签，否则数据表将无法工作。

   ... ...

4. DataTable 通过将以下内容放入您的 javascript 准备好的文档中来“化您的表”:

   $('#table_id').DataTable();

5. 利润!

Fiddle here

code here because so is being fickle