Question

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

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

谢谢你， Anamaria

<!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 个答案: