带有 Bootstrap 样式和响应式扩展的 jQuery DataTables 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26145430/
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
jQuery DataTables with Bootstrap Styling and responsive extension does't work
提问by user3083618
In my html page i replaced the example of this link. In the head tag i have this:
在我的 html 页面中，我替换了此链接的示例。在 head 标签中，我有这个：
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">
for the css and this:
对于 css 和这个：
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http:////cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="http:////cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
for the javascript.
对于 javascript。
The table is this:
表是这样的：
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
I call datatable at the end of body with:
我在正文末尾调用 datatable ：
<script>
$(document).ready(function() {
$('#example').dataTable({
responsive: true
});
});
</script>
My code seems the same of the example on the DataTable site. It works and my doesn't work. Why?
我的代码似乎与 DataTable 站点上的示例相同。它有效，而我的无效。为什么？
回答by Yameen
Is collapsing not working ? What is the issue you are getting. Any console error ? I have copied the same code as you have mentioned above and created a fiddle example. You can check it here ?Fiddle Example for Responsive DataTableHope this helps .
折叠不起作用吗？您遇到的问题是什么。任何控制台错误？我复制了与您上面提到的相同的代码并创建了一个小提琴示例。你可以在这里检查吗？响应式数据表的小提琴示例希望这会有所帮助。
HTML
HTML
<div class="row">
<div class="col-md-12">
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="90%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
<td>9497</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
CSS
body { font-size: 140%
}
.row{
border:1px solid black;
}
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
JS:
JS：
$(document).ready(function() {
$('#example').DataTable();
} );
回答by mike v
It looks like there's too many //symbols in your css & js lines. The second css link has:
看起来//您的 css 和 js 行中有太多符号。第二个 css 链接有：
link href="http:////cdn.datatables......
and it should be:
它应该是：
link href="http://cdn.datatables......
The second and third script calls have the same issue, too.
第二个和第三个脚本调用也有同样的问题。
回答by Robert
Premise: I'm writing this reply because I'm facing the same problem and since I don't find a good example/tutorial, I explain how I'll deal with this.
前提：我写这个回复是因为我面临同样的问题，而且我没有找到一个好的例子/教程，我解释了我将如何处理这个问题。
I suggest to look at the source code in the DataTables Bootstrap Styling page
我建议查看 DataTables Bootstrap Styling 页面中的源代码
That page shows DataTables and the Responsive extension being used with the Bootstrap framework providing the styling
该页面显示了与提供样式的 Bootstrap 框架一起使用的 DataTables 和响应式扩展
Said first that below the demo table being shown in the DataTables Bootstrap Styling, there are the correct CSS, JS and HTML to be used for the case, and if am I not wrong, they are also placed in the correct order,
首先说在DataTables Bootstrap Styling中显示的演示表下面，有正确的CSS，JS和HTML用于案例，如果我没有错，它们也按正确的顺序放置，
you have another option to go for:
你还有另一个选择：
just watch at the source code of that page, e.g. in Firefox I press Ctrl-u and in the address bar it is opened
只需查看该页面的源代码，例如在 Firefox 中我按 Ctrl-u 并在地址栏中打开它
view-source:https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
view-source:https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
this allows to see the source code of the rendered html.
这允许查看呈现的 html 的源代码。
Find the same command for your browser and you'll see how at DataTables website they setup the CSS(es) and JS(es) scripts to make it working.
为您的浏览器找到相同的命令，您将在 DataTables 网站上看到他们如何设置 CSS(es) 和 JS(es) 脚本以使其工作。
What looks sharp is that they just use this script to initialize the table
看起来很敏锐的是他们只是使用这个脚本来初始化表
$(document).ready(function() {
$('#example').DataTable();
} );
so no responsivekeyword is used,
所以没有使用responsive关键字，
which makes it bright that the magic looks done by the singles CSS and JS (if correctly loaded).
这使得单曲 CSS 和 JS（如果正确加载）完成的魔法看起来很明亮。
In the end, to start from a safe point, place the js scripts loading in the HEAD section of your html test page and begin with making this to succesfully work,
最后，从安全的角度开始，将加载的 js 脚本放在 html 测试页面的 HEAD 部分，并开始使其成功工作，
only after a positive test, if needed, move them where you want.
只有在测试呈阳性后，如果需要，将它们移到您想要的位置。
回答by bromgrev
Ha! I had this very same problem.
哈！我有同样的问题。
<link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">
Is referencing the wrong CSS file, which is:
引用了错误的 CSS 文件，即：
responsive.dataTables.css
And why is the naming convention for the stylesheets different from the naming convention for the javascript files? Dunno!
为什么样式表的命名约定与 javascript 文件的命名约定不同？不知道！
