Javascript 数据表样式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39066237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatable styling not working
提问by user3889963
I have a peculiar problem. I am developing a php site that required Datatables to work with it. I noticed that Datatables styling does not work when I run it on localhost be it Firefox or Chrome. My code is as follows:
我有一个奇怪的问题。我正在开发一个需要 Datatables 才能使用的 php 站点。我注意到当我在本地主机上运行它时，Datatables 样式不起作用，无论是 Firefox 还是 Chrome。我的代码如下：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script src="//code.jquery.com/jquery-2.2.3.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
</tbody>
</table>
</body>
</html>
And this gives me a rather ugly version of the datatable. Search functionalities and filtering works but is missing styles and column reordering.
这给了我一个相当丑陋的数据表版本。搜索功能和过滤有效，但缺少样式和列重新排序。
However the strange thing is that a jsfiddle that I drew up containing the same data render as expected, with all styling, etc... The fiddle link is as follows: https://jsfiddle.net/gkyya29h/
然而奇怪的是，我绘制的 jsfiddle 包含与预期相同的数据渲染，所有样式等......小提琴链接如下：https: //jsfiddle.net/gkyya29h/
I'm using XAMPP server with firefox as my default browser. Can someone help me figure this out? I may be doing some very obvious mistake but I'm failing to see it. Thank You.
我使用带有 firefox 的 XAMPP 服务器作为我的默认浏览器。有人可以帮我解决这个问题吗？我可能犯了一些非常明显的错误，但我没有看到。谢谢你。
回答by Eisa Adil
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
Your link tag to CSS is wrong. Maybe some browsers won't process it correctly.
您指向 CSS 的链接标签是错误的。也许某些浏览器无法正确处理它。
回答by Satty
There's this simple error in link: You wrote rel="text/css"
链接中有一个简单的错误：你写了rel="text/css"
Try this:
尝试这个：
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
回答by vishnu
Please download the css file from //cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css and include the downloaded file in your project.
请从 //cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css 下载 css 文件，并将下载的文件包含在您的项目中。
