Add rows to a JQuery Datatable - datatables

Question

So basically, I get a little bit of idea about using data tables.
However, my question is a bit different based on my requirement. I'm not even sure whether it's possible.
As you may see inside the code, $("#tableContainer tbody").append(productList); basically creates a regular table (NOT a datatable).
Is there a way I can use productList directly inside a datatable so that it is created within the table standards?
$(document).ready(function() {
$.post('query-data.php', {
type: "view-products"
}, function(response) {
var productList;
var parsedResponse = JSON.parse(response);
for (i = 0; i < parsedResponse.length; i++) {
productList = $('<tr><td>' + (parsedResponse[i].IS_AVILABLE == 1 ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + (parsedResponse[i].IMAGE_URL != "" && parsedResponse[i].IMAGE_URL ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + parsedResponse[i].PRODUCT_ID + '</td><td>' + parsedResponse[i].NAME + '</td><td>' + parsedResponse[i].CATEGORY_NAME + '</td><td>' + parsedResponse[i].BUSINESS_NAME + '</td></tr>');
$("#tableContainer tbody").append(productList);
}
});
});
<table id="tableContainer" class="table hover view-menus">
<thead>
<tr>
<th>Avail</th>
<th>Img</th>
<th>Prod ID</th>
<th>Prod Name</th>
<th>Cat Name</th>
<th>Biz Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Avail</th>
<th>Img</th>
<th>Prod ID</th>
<th>Prod Name</th>
<th>Cat Name</th>
<th>Biz Name</th>
</tr>
</tfoot>
</table>

Answer 1

Whooppie!! Turns out, it was quite simple.
First declare var table = $('table').DataTable(); before starting the for loop.
Then add table.row.add($(productList )).draw(); while iterating, i.e. inside the for loop. DONE! :)
var table = $('table').DataTable();
for (i = 0; i < parsedResponse.length; i++) {
productList = $('<tr><td>' + (parsedResponse[i].IS_AVILABLE == 1 ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + (parsedResponse[i].IMAGE_URL != "" && parsedResponse[i].IMAGE_URL ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + parsedResponse[i].PRODUCT_ID + '</td><td>' + parsedResponse[i].NAME + '</td><td>' + parsedResponse[i].CATEGORY_NAME + '</td><td>' + parsedResponse[i].BUSINESS_NAME + '</td></tr>');
table.row.add($(productList)).draw();
}