Bootstrap DataTable无法按照插件文档中的描述运行

Question

我正在努力在Bootstrap中创建一个DataTable。 我完全按照插件文档中提到的步骤进行操作，可以在链接https://datatables.net/examples/styling/bootstrap4上找到该插件文档，但无效。 无需排序，搜索，分页就显示该表。

请帮忙。 我不知道我在做什么错。

谢谢阿纳玛利亚

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>DataTable</title>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">

</head>

<body>
    <div class="wrapper">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Table example</h4>
                <h6 class="text-muted card-subtitle mb-2">Bootstrap datatable</h6>
                <div class="table-responsive" style="width:100%">
                    <table class="table table-bordered table-striped" id="table" style="width:100%">
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                                <th>Column 3</th>
                                <th>Column 4</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Cell 1</td>
                                <td>Cell 2</td>
                                <td>Cell 3</td>
                                <td>Cell 4</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="assets/js/custom.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</body>

</html>

Answer 1

问题在于已加载的JS文件的排序。

它一定要是：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="assets/js/custom.js"></script>

由于引导程序需要jQuery，而数据表也需要jQuery，因此必须首先加载它。

如果以后再加载，将导致错误。

因此，您的完整代码应如下所示：

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

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>DataTable</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"> </head> <body> <div class="wrapper"> <div class="card"> <div class="card-body"> <h4 class="card-title">Table example</h4> <h6 class="text-muted card-subtitle mb-2">Bootstrap datatable</h6> <div class="table-responsive" style="width:100%"> <table class="table table-bordered table-striped" id="table" style="width:100%"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="assets/js/custom.js"></script> </body> </html>

Bootstrap DataTable无法按照插件文档中的描述运行

问题描述

1 个解决方案

解决方案1
4 已采纳 2019-07-24 06:35:22

Bootstrap DataTable无法按照插件文档中的描述运行

问题描述

1 个解决方案

解决方案1 4 已采纳 2019-07-24 06:35:22

解决方案1
4 已采纳 2019-07-24 06:35:22