数据表 - 响应不工作？答案

【问题标题】：Datatables - Responsive not working?数据表 - 响应不工作？
【发布时间】：2017-06-17 19:21:19
【问题描述】：

我试图了解为什么 Datatables (https://datatables.net/) 响应式不起作用。其他一切都很好，分页、搜索、排序等。但没有响应？

以下是我所拥有的。

引导程序 v3.3.6

$(function () {
    $('#ManageUsers').DataTable({
        paging: true,
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: true,
        responsive: true
    });
});

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- JS -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>


<!-- CODE -->

<table id="ManageUsers" class="table table-bordered table-striped display responsive">
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

任何帮助将不胜感激。

【问题讨论】：

查看您是否遗漏了任何必需的文件或任何冲突的文件。一一检查。这可能会带来帮助。
?不确定我是否关注？ @AT-2016
请创建并展示你的小提琴
codepen 或 jsfiddle 可能会帮助我们了解到底出了什么问题
这方面有什么进展吗？@Kray

标签： javascript jquery html datatable

【解决方案1】：

尝试按照 DEMO 中的顺序加载库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>

<link href="//cdn.datatables.net/responsive/2.1.1/css/dataTables.responsive.css"/>
<link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

【讨论】：

【解决方案2】：

你不见了 https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css 在根据他们的示例，您的标头并在课堂上错过了 nowrap。
我个人建议通过 javascript 启动响应式数据表它将提供更多选项来自定义您的 UI。

请参考这些链接以供参考 https://datatables.net/extensions/responsive/examples/initialisation/default.html https://datatables.net/extensions/responsive/examples/initialisation/className.html https://datatables.net/extensions/responsive/examples/initialisation/option.html

【讨论】：

【解决方案3】：

尝试在表格中使用 width=100%。不漂亮，但它对我有用。

【讨论】：

【解决方案4】：

只需在文件底部使用此脚本

<script>
  $(function () {
    $("#manageUsers").DataTable({
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "autoWidth": false, 
            "order": [[0, "desc"]],
            responsive: true,
            "processing": true,
            "serverSide": false,
            "sAjaxSource": "data.js",
            "columns": [
            { "data": "name[, ]" },
            { "data": "hr.0" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "hr.2" },
            { "data": "hr.1" }
    });
  </script>

它对我有用。

【讨论】：