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>

我在身体末尾调用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＆amp;中有太多//个符号。 js行。第二个css链接有：

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

应该是：

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

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

Answer 3

前提：我写这个回复是因为我遇到了同样的问题，因为我没有找到一个好的例子/教程，我会解释我将如何处理这个问题。

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

DataTables Bootstrap Styling

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

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

您还有其他选择：

只需关注该页面的源代码，例如在Firefox中我按Ctrl-u并在地址栏中打开它

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

这允许查看渲染的html的源代码。

为您的浏览器找到相同的命令，您将在DataTables网站上看到他们如何设置CSS和JS（s）脚本以使其正常工作。

看起来很清楚的是他们只是使用这个脚本初始化表

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

所以不使用responsive个关键字，

这使得单调的CSS和JS（如果正确加载）完成了神奇的效果。

最后，从安全点开始，将js脚本加载到html测试页的HEAD部分，然后开始使其成功运行，

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

Answer 4

哈！我遇到了同样的问题。

    <link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">

引用错误的CSS文件，即：

responsive.dataTables.css

为什么样式表的命名约定与javascript文件的命名约定不同？说不上！

带引导程序的jQuery DataTables样式和响应式扩展程序无法正常工作

4 个答案: