How to add data table in current table

Question

I am trying to add data table in my current table but not working I do not know where I am wrong in my code.

I insert online CDN for javascript and data table but it is not working. How can I add a datatable using an online 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

You should load jQuery before 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>

Demo

$(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>

Answer 2

Maybe insert jQuery before the rest ? See below

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

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

<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>