javascript - 如何在当前表中添加数据表

Question

我正在尝试在我当前的表中添加数据表但没有工作我不知道我的代码哪里错了。

我为 javascript 和数据表插入了在线 CDN，但它不起作用。如何使用在线 CDN 添加数据表？

<div class="container-fluid">
  <div class="row">
    <div class="col-2">
    </div>
    <div class="col-9">
      <div class="card">
        <div class="card-body">
          <h4 class="mt-0 mb-3 header-title">Subscribers</h4>
          <div class="row">
            <div class="col-sm-12">
              <div class="table-responsive">
                <table id="data_table" class="table table-hover mb-0">
                  <thead class="thead-light">
                    <tr>
                      <th>Subscriber Name</th>
                      <th>Course Name</th>
                      <th>Start Date</th>
                      <th>End Date</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>abc</td>
                      <td>youtube</td>
                      <td>2019-08-01</td>
                      <td>2019-09-01</td>
                      <td>active</td>
                    </tr>
                    <tr>
                      <td>pqr</td>
                      <td>seo</td>
                      <td>2019-07-01</td>
                      <td>2019-08-01</td>
                      <td>active</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

<script>
  $(document).ready(function() {
    $('#data_table').DataTable();
  });
</script>

Answer 1

您应该在 DataTable 之前加载 jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js" type="text/javascript"></script>

演示

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

*<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js" type="text/javascript"></script>*


<div class="container-fluid">
  <div class="row">
    <div class="col-2">
    </div>
    <div class="col-9">
      <div class="card">
        <div class="card-body">
          <h4 class="mt-0 mb-3 header-title">Subscribers</h4>
          <div class="row">
            <div class="col-sm-12">
              <div class="table-responsive">
                <table id="data_table" class="table table-hover mb-0">
                  <thead class="thead-light">
                    <tr>
                      <th>Subscriber Name</th>
                      <th>Course Name</th>
                      <th>Start Date</th>
                      <th>End Date</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>abc</td>
                      <td>youtube</td>
                      <td>2019-08-01</td>
                      <td>2019-09-01</td>
                      <td>active</td>
                    </tr>
                    <tr>
                      <td>pqr</td>
                      <td>seo</td>
                      <td>2019-07-01</td>
                      <td>2019-08-01</td>
                      <td>active</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>