Unable to refresh datatable
I have an html document using datatables and I have the following code:
<div id="tablewrap" style="margin: 20px;">
<table id="mytable" class="cell-border" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div id="footer">
</div>
In a javascript file I am attempting to use .innerhtml to append the proper data in between the tbody tags so that the result is a proper datatable populated with meaningful data. However, I have a search input box that filters through the rows so that the user can search for key words. When I try to use it the data gets erased. I have tested it with default data loaded in the html doc and the search clears the data gathered from innerhtml and reverts back to default data. I have determined that the rows generated from Innerhtml disappears and the datatable goes back to it's default state. How do I get the rows to be generated in a proper datatable?