Hi malar,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
return Json("");
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<div style="width: 500px">
<table class="table table-striped table-bordered table-hover" id="tblCustomers">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr style="height:5px;">
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr style="height:5px;">
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr style="height:5px;">
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr style="height:5px;">
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</tbody>
</table>
<input id="btnRemove" type="button" value="Remove Plugin" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
<script type="text/javascript">
$(function () {
$("#tblCustomers").DataTable();
$("#btnRemove").click(function () {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var table = $('#tblCustomers').DataTable();
table.destroy();
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
});
</script>
</body>
</html>
