How to append data to bootstrap data table?

I am getting the data to display but the table says "No data available in table" then it displays the database data and it does not allow me to do any of the built in features that come with the bootstrap data table like sort columns of pagination. Here is my code:

<div class="table-responsive">

<table id="datable_1" class="table table-hover display pb-30" >

```
<thead>
```
```
<tr>
```
```
<th>Product</th>
```
```
<th>Variation</th>
```
```
<th>Department</th>
```
```
<th>Category</th>
```
```
<th>Air/Boat</th>
```
```
</tr> 
```
```
</thead>
```
```
<tbody>
```
```
</tbody>
```

<script type='text/javascript'>

$(document).ready(function () {

/* call the php that has the php array which is json_encoded */

$.getJSON('dist/php/catalog.php', function (catalog) {

/* data will hold the php array as a javascript object */

$.each(catalog, function (catalog_key, catalog_val) {

$("table.table").append("<tr><td>" + catalog_val.item_name + "</td><td>" + catalog_val.variation + "</td><td>" + catalog_val.department + "</td><td>" + catalog_val.category + "</td><td>" + catalog_val.vessel_name + "</td></tr>");

```
});
```
```
});
```
```
});
```
```
</script>
```
```
</div>
```

Topic Participants
nicholasgibbs
jakecigar

How to append data to bootstrap data table?

How to append data to bootstrap data table?

Topic Participants

nicholasgibbs

jakecigar