Javascript 使用Datatables和RevealJS
我遇到的第一个问题是，我试图将我的代码格式化为干净、易于阅读的格式，但当我这样做时，我在浏览器中浏览了两侧，它没有格式化，使其未对齐，因此我使用它使其在实际HTML文件中看起来对齐，它看起来不专业，难以阅读。为什么会这样 我遇到的第二个问题是实际数据表插件本身，当我有HTML表来显示用插件呈现的表时，它会减少很多内容，我尝试对表应用一个类并修改表的高度和宽度，但它不会根据我的css规则进行调整 我遇到的最后一个问题是，在我的表格HTML中，为了解释应该如何编写它，它向表格应用了一个ID，而这个ID在呈现之后才应该执行。不知道为什么会这样Javascript 使用Datatables和RevealJS,javascript,jquery,html,datatables,reveal.js,Javascript,Jquery,Html,Datatables,Reveal.js,我遇到的第一个问题是，我试图将我的代码格式化为干净、易于阅读的格式，但当我这样做时，我在浏览器中浏览了两侧，它没有格式化，使其未对齐，因此我使用它使其在实际HTML文件中看起来对齐，它看起来不专业，难以阅读。为什么会这样 我遇到的第二个问题是实际数据表插件本身，当我有HTML表来显示用插件呈现的表时，它会减少很多内容，我尝试对表应用一个类并修改表的高度和宽度，但它不会根据我的css规则进行调整 我遇到的最后一个问题是，在我的表格HTML中，为了解释应该如何编写它，它向表格应用了一个ID，而这个I
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction of Datatables</title>
<meta name="author" content="">
<meta name="description" content="Creating a project to introduce the use of the Datatables jQuery plugin.">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/league.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style>
#table-container {
width: 200px;
}
</style>
</head>
<body>
<div class="reveal container-fluid">
<div class="slides">
<section>
<h1>Datatables</h1>
<p>jQuery Plugin for HTML tables</p>
<p>By: Me</p>
</section>
<section>
<h2>Uses For Datatables</h2>
<ul>
<li>Assists with paginating many rows of tabular data.</li>
<li>Can manipulate columns and rows via modifications with passed parameters</li>
<li>Can work with backend data via a API in the form of JSON</li>
<li>Can sort and search through data for results</li>
<li><strong>THEMEABLE</strong></li>
</ul>
</section>
<section>
<pre><code data-trim>
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow@example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens@example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith@example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones@example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts@example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons@example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</code></pre>
</section>
<section>
<h2>Javascript Code</h2>
<pre><code data-trim>
<script>
var dataTable = $('.datatable').dataTable();
</script>
</code></pre>
</section>
<section>
<div id="table-container">
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow@example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens@example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith@example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones@example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts@example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons@example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
viewDistance: 1,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{
src: 'lib/js/classList.js', condition: function () {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js', async: true, condition: function () {
return !!document.querySelector('pre code');
}, callback: function () {
hljs.initHighlightingOnLoad();
}
},
{src: 'plugin/notes/notes.js', async: true}
]
});
</script>
<script>
var datatTable = $('.datatable').dataTable();
</script>
</body>
</html>
数据表简介
var link=document.createElement（'link'）；
link.rel='stylesheet'；
link.type='text/css'；
link.href=window.location.search.match（/print pdf/gi）？'css/print/pdf.css'：'css/print/paper.css'；
document.getElementsByTagName（'head'）[0].appendChild（链接）；
#桌子容器{
宽度：200px；
}
数据表
用于HTML表的jQuery插件
作者：我
数据表的用途
- 帮助对多行表格数据进行分页
- 可以通过修改传递的参数来操作列和行
- 可以通过JSON形式的API处理后端数据
- 可以在数据中排序和搜索结果
- 主题化
身份证件
用户名
电子邮件地址
角色
1.
烟雾
smorrow@example.com
物主
2.
杰斯特文斯
jstevens@example.com
编辑
3.
克斯米特
ksmith@example.com
基本用户
4.
琼斯
wjones@example.com
基本用户
4.
伊库恩茨
jcoonts@example.com
管理员
5.
红豆
rsimmons@example.com
管理员
var dataTable=$（'.dataTable'）.dataTable（）；
身份证件
用户名
电子邮件地址
角色
1.
烟雾
smorrow@example.com
物主
2.
杰斯特文斯
jstevens@example.com
编辑
3.
克斯米特
ksmith@example.com
基本用户
4.
琼斯
wjones@example.com
基本用户
4.
伊库恩茨
jcoonts@example.com
管理员