引导表模板不匹配答案

【问题标题】：bootstrap table template not match引导表模板不匹配
【发布时间】：2019-12-28 10:40:00
【问题描述】：

我正在尝试复制此模板并将此表用作我的启动，但如果我要复制代码，则结果将不会有相同的输出。

这是我的参考表模板： https://mdbootstrap.com/docs/jquery/tables/pagination/

这是我当前复制的代码放在我的 index.cshtml 上：

<head>

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>


<body>
    <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <th class="th-sm">
                    Name

                </th>
                <th class="th-sm">
                    Position

                </th>
                <th class="th-sm">
                    Office

                </th>
                <th class="th-sm">
                    Age

                </th>
                <th class="th-sm">
                    Start date

                </th>
                <th class="th-sm">
                    Salary

                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>          
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Position
                </th>
                <th>
                    Office
                </th>
                <th>
                    Age
                </th>
                <th>
                    Start date
                </th>
                <th>
                    Salary
                </th>
            </tr>
        </tfoot>
    </table>
</body>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

    $(document).ready(function () {
        $('#dtBasicExample').DataTable();
        $('.dataTables_length').addClass('bs-select');
    });

</script>

输出应该是这样的：

但从我的输出来看，它没有任何分页、限制下拉和搜索栏。这只是一张普通的桌子：

有没有我遗漏的物品。 TIA

【问题讨论】：

mdbootstrap.com/docs/jquery/tables/pagination Note: This integration is available from version 4.5.7 (released 16.07.2018). 而你正在使用4.3.1

标签： javascript jquery html datatables bootstrap-4

【解决方案1】：

只需将其与其他脚本一起添加到页面底部

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">

并将其添加到您要添加 css 文件的页面顶部

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

它会起作用的

【讨论】：

【解决方案2】：

您需要包含 MDBootstrap 的 css 和 js，而不仅仅是引导程序

【讨论】：

【解决方案3】：

您只使用Bootstrap。

您还必须使用MDBootstrap CSS 和DataTable CSS。

将这些链接添加到您的网页：

https://mdbootstrap.com/md-bootstrap-cdn/

在下面的链接中，转到“入门”选项卡。您还将获得那些Datatable 链接。他们的数据表不同于自然数据表。因此，如果您下载他们的代码并粘贴链接，它将正常工作。

https://mdbootstrap.com/docs/jquery/tables/pagination/

【讨论】：