Refresh DataTable after Add

Question

Hi

 

I have below controller & JS. I want to refresh datatable after Add & display message in popup

<table table table-striped table-bordered" style="width:100%" id="tblLocation">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.IsActive)
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr [email protected]>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.IsActive)
</td>
<td>
<a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>
<a class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'
@{ if(item.IsActive == "N")
{
@:disabled="disabled"
}
}><i class='fa fa-trash'></i> Delete</a>
</td>
</tr>
}
</tbody>
</table>

function Add() {
var res = validate();
if (res == false) {
return false;
}
var objLocation = {
Id: $('#txtId').val().toUpperCase(),
Description: $('#txtDescription').val().toUpperCase(),
IsActive: $('#txtIsActive').val().toUpperCase()
};
$.ajax({
url: "/Location/Add",
data: JSON.stringify(objLocation),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function () {
$.notify(result.message, {
globalposition: "top center",
//position:"center",
className:"success"
})
$('#myModal').modal('hide');
},
error: function (xhr, ajaxOptions, thrownError) {
$("#msgModalBody").html('Status : ' + xhr.status + ' Error : ' + thrownError);
$("#msgModal").modal('show');
}
});
}

Thanks