Jquery | How to create/edit Jquery Datatable dynamically

How to create/edit Jquery Datatable dynamically?

HTML code:

<div class="col-md-12 col-sm-12 col-xs-12">
<table id="table">
<tbody>
<tr>
<th>Rules</th>
</tr>
</tbody>
</table>
</div>
<button id="go">Go</button>

Here is the javascript function:

function addData()
{
var data=[this array contains all the values that we need to show in table];
keys=Object.keys(data);
var dataTable = $('#table').DataTable();
  	   	dataTable.destroy();
  	 	$("#tablebody").find("tr").remove();
  	 	var tBody = document.getElementById("tablebody");
  	 	for(i=0;i<keys.length;i++)
  	 	{
  		var row = tBody.insertRow(i);
                row.id = "tablerow"+keys[i];
	        var cell = row.insertCell(0);
  cell.innerHTML = "+data[keys[i]]+""; } $('#table').DataTable(); }