Unable to refresh datatable

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?