猿问

Bootstrap DataTable 无法按照插件文档中的描述工作

我正在努力在 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>


holdtom
浏览 136回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答