首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >静态网站中的表分页问题

静态网站中的表分页问题
EN

Stack Overflow用户
提问于 2015-06-11 19:11:32
回答 1查看 54关注 0票数 1

我有一个表,其中包括许多YouTube视频,如在this pic中显示,我不希望所有这些视频在同一时间显示。我能做什么?我试过datatables.nettablesorter.com

代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2015-06-11 20:31:11

数据表应该能很好地满足你的需求。根据你拥有的行数,旧版本的IE可能会因为你输入到dom中的所有数据而不堪重负,但这并不是特定于数据表的,更多的是静态网站的症状,而不是使用数据驱动的网站。

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

DataTables

  • Properly

  • Include jQuery

  • Include DataTables

  • Properly

  • your tables -这意味着除了你已经拥有的东西之外,还要使用jQuery和tbody标签,如果没有这个,数据表将无法工作。

... ...

  • DataTable通过在javascript中准备好的文档中放入以下内容来定义您的表:

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

  • Profit!

Fiddle here

代码语言:javascript
复制
code here because so is being fickle
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30779171

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档