我遇到的第一个问题是我试图将我的代码格式化为干净且易于阅读但是当我在浏览器中执行并浏览时，它没有格式化并使其未对齐所以我使用了它使它在实际的HTML文件中看起来对齐它看起来不专业且难以阅读。为什么会这样？
我遇到的第二个问题是实际的数据表插件本身就是当我有HTML表来显示用插件渲染的表时，它会减少很多，我尝试将一个类应用到表并修改表格的高度和宽度，但不按照我的css规则进行调整。
我遇到的最后一个问题是，使用表格的HTML来解释它应该如何编写，它会在表格中应用一个ID，直到渲染之后才能完成。不知道为什么会这样。
<!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>
这是我正在看的截图。
https://www.dropbox.com/s/p8luug2gsytnwno/Screenshot%202015-01-27%2012.50.43.png?dl=0
