如何使用 jQuery 数据表插件？答案

【问题标题】：How to work with jQuery datatables plugins?如何使用 jQuery 数据表插件？
【发布时间】：2019-09-06 19:03:14
【问题描述】：

我正在开发一个包含数据表的项目，因此我想使用来自 datables.net 的数据表插件。我按照所有说明操作，但没有得到结果（搜索输入和条目标签未出现）。

我认为链接或引用有问题。

这是我的代码 - 我需要你的帮助：

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <title>nchlh tekhdem</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 mydatatable " style="width: 100%"  >
            <thead>
                <tr>
                  <th>ID</th>
                  <th>Product</th>
                  <th>Detected in Version</th>
                  <th>Type</th>
                  <th>Status</th>
                  <th>Prio</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</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>ID</th>
                  <th>Product</th>
                  <th>Detected in Version</th>
                  <th>Type</th>
                  <th>Status</th>
                  <th>Prio</th>
                </tr>
            </tfoot>
        </table>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $('.mydatatable').Datatable() ; 
    </script>
</body>
</html>

【问题讨论】：

标签： jquery html css datatables bootstrap-4

【解决方案1】：

请替换下面的js代码。

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

您缺少document.ready 函数。

document.ready 函数在所有 js 文件加载完成后执行。请注意，加载所有文件后，您可以执行其功能。

谢谢，编码愉快！

【讨论】：

【解决方案2】：

你的javascript代码错了，应该是

        $(document).ready( function () {
            $('.mydatatable').Datatable() ; 
        });

【讨论】：

【解决方案3】：

一切都很好，你在数据表对象名称上犯了一个错误：

  $('.mydatatable').DataTable();

没有

  $('.mydatatable').Datatable() ;

更好用的Id：

 <table id="mydatatable "  class="table table-striped table-bordered mydatatable " style="width: 100%"  >

<script>

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

</script>

【讨论】：