将搜索框添加到数据表答案

【问题标题】：Add search box to datatable将搜索框添加到数据表
【发布时间】：2019-08-08 10:15:10
【问题描述】：

我必须在我的网页中使用搜索框创建一个数据表。

我正在使用数据表库，但我不明白为什么没有出现搜索框。

这是我的代码：

    <head>
        <meta charset = "utf-8">
        <title>Prescriptions</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    </head>


    <body>

        <div class="container mb-3 mt-3">
            <table class="table table-striped table-bordered" style="width: 100%" id="mydatatable">

                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Year</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Giulio</td>
                        <td>1998</td>
                    </tr>
                    <tr>
                        <td>Riccardo</td>
                        <td>2000</td>
                    </tr>
                    <tr>
                        <td>Eleonora</td>
                        <td>1997</td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Year</th>
                    </tr>
                </tfoot>

            </table>
        </div>

        <script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

        <script>
            $('#mydatatable').dataTable( {
                "searching": true
            } );
        </script>
    </body>

我添加了"searching": true，但是当我运行代码时没有搜索框。我需要做什么？谢谢！

【问题讨论】：

你的意思是`$('#mydatatable').DataTable({`?
我也看到不包括 jQuery 库。

标签： html datatables bootstrap-4

【解决方案1】：

这里我为你做了一些代码，你可以检查一下，我希望这能帮助你更准确地学习数据表。谢谢

 $('#mydatatable').dataTable({
                "searching": true
            });

        div.dataTables_wrapper div.dataTables_filter input {
                margin-left: 0.5em;
                display: inline-block;
                width: auto;
                border-radius: 20px;
            }
    
            div.dataTables_wrapper div.dataTables_length select {
                width: auto;
                display: inline-block;
                border-radius: 20px;
            }
    
            .mb-3,
            .my-3 {
                margin-bottom: 1rem !important;
                background: #efe7dc80;
                padding: 30px;
            }
    
            th {
                background-color: white;
            }
    
            tr:nth-child(odd) {
                background-color: wheat;
            }
    
            th,
            td {
                padding: 0.5rem;
                border: solid 1px;
            }
    
            td:hover {
                background-color: lightsalmon;
            }
    
            .paginate_button {
                border-radius: 0 !important;
            }
    
            .body-content {
    
                margin-top: 10%;
            }
    
            #table-container {
                background: #f4f4f49e;
                padding: 5%;
                border-radius: 10px;
            }
    
            td {
                border: none;
            }
    
            th {
                border: none;
                background-color: #5f81a5;
                color: white;
            }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
        <title>Prescriptions</title>
       
    </head>
    
    <body>
        <div class="table-container">
            <div class="container mb-3 mt-3">
                <table class="table table-striped table-bordered" style="width: 100%" id="mydatatable">
    
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Year</th>
                        </tr>
                    </thead>
    
                    <tbody>
                        <tr>
                            <td>Giulio</td>
                            <td>1998</td>
                        </tr>
                        <tr>
                            <td>Riccardo</td>
                            <td>2000</td>
                        </tr>
                        <tr>
                            <td>Eleonora</td>
                            <td>1997</td>
                        </tr>
                    </tbody>
    
                    <tfoot>
                        <tr>
                            <th>Name</th>
                            <th>Year</th>
                        </tr>
                    </tfoot>
    
                </table>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
        <script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    
        <script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
        <link href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.jqueryui.min.css" />
    
    
       
    </body>
    
    </html>

【讨论】：

【解决方案2】：

您也缺少 jquery 和 Datatable 脚本导入

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

排序应该是这样的

【讨论】：

【解决方案3】：

脚本导入顺序很重要，缺少jquery脚本导入

【讨论】：