Hi rani,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult AjaxMethod()
{
List<Customer> customers = (from customer in this.Context.Customers
select customer).ToList();
return Json(JsonConvert.SerializeObject(customers));
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="container">
<table id="tblCustomers" class="table">
<thead>
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
function OnSuccess(response) {
var customers = eval(response);
$("#tblCustomers").DataTable({
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: customers,
columns: [
{ 'data': 'CustomerID', 'searchable': false },
{ 'data': 'ContactName' },
{ 'data': 'City' },
{ 'data': 'Country', 'searchable': false },
{
'data': 'Country', render: function (data, type, row, meta) {
return data.toLowerCase() === 'germany' ?
"<a class='btn btn-danger btn-sm disabled' id='btnDelete' style='margin-left:5px'><i class='fa fa-trash'></i> Delete</a>" :
"<a class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'><i class='fa fa-trash'></i> Delete</a>";
}
}
]
});
};
</script>
</body>
</html>
Screenshot
