How to add data table in current table
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>
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>