Jquery DataTable ReInitialize Not Working

Question

Hi,

 

How to destroy and reinitialize the values for datatable. I am not able to achieve this...

 

HTML

<select id='ddlstatus'
<option value='Inserted'>Inserted</option>
<option value='Approved'>Approved</option>
</select>

<table id="example">
<thead>
<tr>
<th>OrderId</th>
<th>Order</th>
</tr>
</thead>
</table>

JQuery

var dtexample = 'undefined';
$(document).ready(function()
{
$("#ddlstatus").change(function()
{
loadDT();
event.preventDefault();
});
loadDT();
});
function loadDT()
{
var status = $("#ddlstatus).val();
if(dtexample != 'undefined' )
{
dtexample.destroy();
}
if(status == "Inserted" )
$("#example").append("<tbody><tr><td>1</td><td>ABC</td></tr></tbody>");
else
$("#example").append("<tbody><tr><td>2</td><td>DEF</td></tr></tbody>");
dtexample = $("#example).DataTable();
}