具有引导程序样式和响应式扩展的jQuery DataTables不起作用

Question

在我的html页面中，我替换了这个link的示例。在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">

对于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>

用于javascript。

表如下所示：

<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>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</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>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</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>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</td>
                </tr>
            </tbody>
        </table>

我在body的末尾使用以下命令调用datatable：

<script>
        $(document).ready(function() {
            $('#example').dataTable({
                responsive: true
            });
        });
    </script>

我的代码似乎与DataTable站点上的示例相同。它能用，但我的不能用。为什么？

Answer 1

崩溃不起作用吗？您遇到的问题是什么？有没有控制台错误？我已经复制了你上面提到的相同的代码，并创建了一个小提琴示例。你可以在这里查看吗?Fiddle Example for Responsive DataTable希望这能有所帮助。

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>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</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>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</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>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

body { font-size: 140% 
}
.row{
        border:1px solid black;
}     
table.dataTable th,
table.dataTable td {
        white-space: nowrap;
}

JS：

$(document).ready(function() {
    $('#example').DataTable();
} );

Answer 2

看起来css & js行中有太多的//符号。第二个css链接包含：

link href="http:////cdn.datatables......

它应该是：

link href="http://cdn.datatables......

第二次和第三次脚本调用也有同样的问题。

Answer 3

前提:我写这封回信是因为我面临着同样的问题，因为我找不到一个好的例子/教程，所以我解释了我将如何处理这个问题。

我建议查看DataTables Bootstrap样式页面中的源代码

DataTables Bootstrap Styling

该页面显示了与提供样式的Bootstrap框架一起使用的DataTables和Responsive扩展

首先说在DataTables Bootstrap样式中显示的演示表下面，有用于案例的正确的CSS，JS和HTML，如果我没有错，它们也按正确的顺序放置。

你还有另一个选择：

只需查看该页面的源代码，例如在Firefox中，我按下Ctrl-u，就会在地址栏中打开它

view-source:https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

这允许查看所呈现的html的源代码。

找到适用于您的浏览器的相同命令，您将看到在DataTables网站上他们是如何设置CSS(es)和JS(es)脚本使其工作的。

看起来很明显，他们只是使用这个脚本来初始化表

$(document).ready(function() {
    $('#example').DataTable();
} );

所以没有使用responsive关键字，

这使得它看起来像是由单人CSS和JS完成的魔术(如果正确加载)。

最后，为了从安全的角度出发，将加载的js脚本放在html测试页面的HEAD部分，并开始使其成功工作。

只有在阳性测试后，如果需要，将它们移动到您想要的位置。