Question

我试图理解为什么Datatables（https://datatables.net/）响应不起作用。其他一切工作都很好，分页，搜索，订购等等。但没有响应？

以下是我所拥有的。

Bootstrap 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>

非常感谢任何帮助。

Answer 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" />

Answer 2

你错过了 https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css in 根据他们的例子，你的标题和错过了现在的课程。
我个人建议通过javascript启动响应式dataTable 它将提供更多选项来自定义您的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

Answer 3

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

Answer 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>

它对我有用。

数据表 - 响应不起作用？

4 个答案: